css 实现一个尖角_纯CSS实现页面的尖角、小三角、不同方向尖角的方法小结

效果图：

方法一的效果图：

方法二的效果图：

方法三的效果图：

方法1：因为有背景，所有实现起来比较方便，尖角的内部同个颜色就可以不用考虑遮挡问题

html:

带背景颜色的小三角实现是比较简单的！

css

#top {

position: absolute;

width: 0px;

height: 0px;

line-height: 0px;/*为了防止ie下出现题型*/

border-bottom: 10px solid #89b007;

border-left: 10px solid #fff;

border-right: 10px solid #fff;

left: 76px;

top: -10px;

}

#first {

border-radius:8px;

-moz-border-radius:8px;-ms-border-radius:8px;-o-border-radius:8px;-webkit-border-radius:8px;

position: absolute;

height: 150px;

width: 300px;

background: #89b007;<