使用CSS实现尖角

html-css016

使用CSS实现尖角,第1张

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

可以用css实现样式、效果都是可以的（ie6下除了a标签都不支持hover伪类）

css样式：

小三角由两个标签用border-width可以实现类似效果；

然后匹配好颜色就可以了。。。

具体你参考下“css实现无图小三角”的搜索结果

理论上也是可以的，做两个“钩子”，如下

CSS代码：

<style type="text/css">

.aa{ position:relativetop:-40pxwidth:0pxheight:0pxborder:20px solid rgba(0,0,0,0) border-left:20px solid #000overflow:hidden}

.bb{ position:relativeleft:10pxwidth:0pxheight:0pxborder:20px solid red border-left:20px solid #fffoverflow:hidden}

</style>

HTML代码

<div class="bb"></div>

<div class="aa"></div>

这个在火狐里是正常的。但是也有其他问题，比如rgba的颜色代码不是所有浏览器都支持的