我想为我的小部件标题创建一个band,如上图所示和HTML结构;
<div class="wt">
<div class="blue-area">text</div>
<div class="green-area">text</div>
</div>
文字长度可以改变,所以可能会改变这样的蓝色区域宽度;
我可以用纯CSS创建吗?
答案 0 :(得分:4)
这里有一些CSS,但我认为这就是你要找的东西。通过使用::after
伪元素
由于无法相对地调整三角形的大小,我还必须使<div>
s成为固定高度。继续,更改文本并适当地观察<div>
更改。
.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>
答案 1 :(得分: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>