html - 我可以用纯 css 创建交叉线背景框吗

Question

我想为我的小部件标题创建带，如上图和这样的 HTML 结构；

<div class="wt">
    <div class="blue-area">text</div>
    <div class="green-area">text</div>
</div>

文本长度可变，所以蓝色区域的宽度可能会像这样变化；

我可以用纯 css 创建这个吗？

Answer 1

这里有一些 CSS，但我认为这正是您要找的。我通过使用 ::after 获得了箭头的外观。伪元素

我还必须制作 <div>由于无法相对确定三 Angular 形的大小，因此它的高度是固定的。继续，更改文本并观看 <div>适当改变。

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>