使用CSS制作小三角形实际就是通过控制块元素的边框来实现的。
例如：
<style>
.triangle-up {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid red
}
.triangle-down {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 100px solid red
}
.triangle-left {
width: 0
height: 0
border-top: 50px solid transparent
border-right: 100px solid red
border-bottom: 50px solid transparent
}
.triangle-right {
width: 0
height: 0
border-top: 50px solid transparent
border-left: 100px solid red
border-bottom: 50px solid transparent
}
</style>
<div class='triangle-down'></div> <!--向下三角形-->
<div class='triangle-up'></div> <!--向上三角形-->
<div class='triangle-left'></div> <!--向左三角形-->
<div class='triangle-right'></div> <!--向右三角形-->
原理就是设置块元素的三条边透明掉（tranparent）
如果你是指css3生成圆角的话：-webkit-border-top-left-radius:5px
-webkit-border-top-right-radius:10px
-webkit-border-bottom-right-radius:10em
-webkit-border-bottom-left-radius:3px
-moz-border-radius-topleft:5px
-moz-border-radius-topright:10px
-moz-border-radius-bottomright:10em
-moz-border-radius-bottomleft:3px
border-top-left-radius:5px
border-top-right-radius:10px
border-bottom-right-radius:10em
border-bottom-left-radius:3px
补充下：HHTecShare说的缩写，理论上是对的，实际上你还是按上面写法把每个内核前缀的都分上下左右单独写出来保险，目前对这种标准的写法：border-radius: 5px 10px 20px 40px浏览器支持是不统一的。
