使用CSS实现尖角

html-css017

使用CSS实现尖角,第1张

CSS3中都只有圆角处理。这个目前只能用图片，而且用CSS3处理出来的（圆角和文字阴影）都有很多浏览器不兼容（主要是IE6）兄弟，你还是用图片处理吧。这个是这类特殊形状的唯一处理方式。如果是考虑刷新速度的话，你应该充图片的切割，以及JS运行效率上更多的考虑些。

lz，你好，这个效果是用css3写的，IE8及以前的浏览器版本是不支持的。不影响使用。

html布局样式

<i>

<em></em>

<span></span>

</i>

这是两层元素 是为了制作尖角符号，利用css边框特性，两层元素叠加，边框背景覆盖制作向下边角。

动画效果是css3的 transition

i{

display:inline

float:left

position:relative

margin:15px 0

width:6px

height:6px

-webkit-transition:.3s ease-in

-moz-transition:.3s ease-in

-o-transition:.3s ease-in

transition:.3s ease-in

}

em,span{

position:absolute

top:0

left:0

width:0

height:0

border-color:rgba(255,255,255,0)

border-style:solid

overflow:hidden

}

i em{

border-top-color:#6C6C6C

top:1px

border-width:3px 3px 0

}

i span{

border-top-color:whiteSmoke

border-width:3px 3px 0

}

旋转效果是transform 属性

i:hover{

-webkit-transform: rotate(180deg)

-moz-transform: rotate(180deg)

-ms-transform: rotate(180deg)

-o-transform: rotate(180deg)

transform: rotate(180deg)

}

当鼠标滑过的时候执行过渡动画，执行的结果就是i元素变形，旋转180度，lz可以试下^_^