我想为我的widget标题创建band,就像上面的图片和HTML结构一样;
<div class="wt">
<div class="blue-area">text</div>
<div class="green-area">text</div>
</div>
文本长度可变,所以可能会像这样改变蓝色区域的宽度;
我能用纯css创建这个吗?
最佳答案
这里有很多CSS,但我想这正是你要找的。我通过使用::after
伪元素实现了箭头的外观
由于无法相对地确定三角形的大小,我还不得不将<div>
s设置为固定高度。继续,更改文本并适当地观察<div>
s的更改。
JSFiddle
.blue-area,
.green-area {
display: inline-block;
line-height: 30px;
height: 30px;
}
.blue-area {
padding: 0 0 0 8px;
background-color: #26799b;
position: relative;
}
.blue-area:after {
content: '';
position: absolute;
left: 100%;
top: 0;
border-color: transparent transparent #26799b transparent;
border-style: solid;
border-width: 0 30px 30px 0;
display: block;
}
.green-area {
background-color: #386c19;
padding: 0 8px 0 30px;
}
<div class="wt">
<div class="blue-area">text dfg gh fgh </div><div class="green-area">text fgh fgh fgh fgdfg dfg dfg</div>
</div>