我想为我的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>

10-07 19:26
查看更多