我可以用纯css创建交叉衬里的背景框

Question

我想为我的小部件标题创建一个band，如上图所示和HTML结构;

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

文字长度可以改变，所以可能会改变这样的蓝色区域宽度;

我可以用纯CSS创建吗？

Answer 1

这里有一些CSS，但我认为这就是你要找的东西。通过使用::after伪元素

，我已经实现了箭头的外观

由于无法相对地调整三角形的大小，我还必须使<div> s成为固定高度。继续，更改文本并适当地观察<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>

Answer 2

是的，背景渐变： 为例：

div {background:linear-gradient(to top right, #247A9B, #247A9B 50%,#386C19 50% ,#386C19);}

对于旧版浏览器，您需要使用前缀。

在html上进行

演示：http://codepen.io/anon/pen/xFjEl

html {
  background: linear-gradient( to top right, #247A9B, #247A9B 49%, #386C19 50%, #386C19);
  min-height: 100%;
}


/* or use degrees */

p {
  margin: 2em;
  background: #247A9B;
  border: solid;
}

p span {
  display: inline-block;
  padding: 0 1.5em 0 0;
  background: linear-gradient( 60deg, #386C19, #386C19 93%, #247A9B 94%, #247A9B);
}

p span b {
  display: none;
}

p span:hover b {
  display: inline;
}

<p>
  <span> text to increase on hover <b>here more text in green area</b></span> text in blue area
</p>