这是CSS它是如何描述
.hint {
background: url('/triangle.png') center right no-repeat;
padding-right: 10px;
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.25);
}
如何移动留下了阴影10px的?
这是CSS它是如何描述
.hint {
background: url('/triangle.png') center right no-repeat;
padding-right: 10px;
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.25);
}
如何移动留下了阴影10px的?
你可以用CSS(不需要的图像)做这一切:
.hint {
background:#F85B58;
display:inline-block;
position:relative;
color:white;
padding:20px;
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.25);
}
.hint:before, .hint:after {
content:" ";
display:block;
position:absolute;
top:50%;
left:100%;
width:0px;
height:0px;
overflow:hidden;
margin-top:-10px;
border:10px solid transparent;
border-left-color:#F85B58;
}
.hint:before {
margin-top:-8px;
border-left-color:rgba(0, 0, 0, 0.25);
}
参见:http://jsfiddle.net/ro9nfhw6/
更改border-width
使箭头更严重(根据你的榜样):
.hint:before, .hint:after {
border-width:6px 10px;
}
.hint-outer {
background: url('/triangle.png') center right no-repeat;
padding-right: 10px;
}
.hint-inner {
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.25);
height: 100px;
}
<div class="hint-outer"><div class="hint-inner"></div></div>
请记住,支持:之前和之后:在旧版浏览器中并不好,如果它存在的话。 – evilunix 2014-09-04 14:48:56
@evilunix注意到,但支持是相当不错的 - [回到IE8事实上](http://caniuse.com/#feat=css-gencontent) – Moob 2014-09-04 14:51:57