无图像的纯CSS箭头标签 [英] image-less pure-CSS arrow tags
本文介绍了无图像的纯CSS箭头标签的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有没有办法创建美味的箭头标签,而不使用图像:
Is there a way a way to create Delicious-like "arrow tags" without the use of images:
我熟悉 border-triangle technique ,但无法让它看起来体面(部分是因为我们需要一个额外的外框来框架整个组件)。
I'm familiar with the border-triangle technique, but couldn't get that to look decent (in part because we'd need an additional outer border to frame the entire component).
推荐答案
我创建一个例子可能是你想要的。
I create a little example may be that's you want .
CSS
div{
padding:5px 10px;
font-size:12px;
-moz-border-radius:0 5px 5px 0;
-webkit-border-radius:0 5px 5px 0;
float:left;
margin-left:30px;
margin-top:20px;
position:relative;
font-family:verdana;
color:#3b3d3c;
border:1px solid #d5d5d7;
border-left:0;
}
div{
background: -moz-linear-gradient( top , #fbfdfc 0%,#f6f5f5 100%);
background: -webkit-linear-gradient( top , #fbfdfc 0%,#f6f5f5 100%);
}
div:after{
content:"";
width:18px;
height:18px;
background: -moz-linear-gradient( left top , #fbfdfc 0%,#f6f5f5 100%);
background: -webkit-linear-gradient( left top , #fbfdfc 0%,#f6f5f5 100%);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display:block;
position:absolute;
top:3px;
left:-10px;
z-index:-1;
border:1px solid #d5d5d7;
}
检查此http://jsfiddle.net/9EEEP/76/
UPDATED
现在工作in chrome also
UPDATED Now work in chrome also
更多您也可以检查我的这个答案如何编码某些css形状?
For more you check my this answer also How to code certain css shapes?
我使用css3在IE8浏览器下无效。
I use css3 which not work in IE8 below browsers.
这篇关于无图像的纯CSS箭头标签的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文