上三角： 
.up {
width: 0;height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #000;
}
<div class="up"></div>
下三角：
.down {
width: 0;height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #000;
}
<div class="down"></div>
左三角：
.left {
width: 0;height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #000;
border-bottom: 50px solid transparent;
}
<div class="left"></div>
右三角：
.right {
width: 0;height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #000;
border-bottom: 50px solid transparent;
}
<div class="right"></div>
左上：
.topLeft {
width: 0;height: 0;
border-top: 100px solid #000;
border-right: 100px solid transparent;
}
<div class="topLeft"></div>
右上：
.topRight {
width: 0;height: 0;
border-top: 100px solid #000;
border-left: 100px solid transparent;
}
<div class="topRight"></div>
左下：
.bottomLeft {
width: 0;height: 0;
border-bottom: 100px solid #000;
border-right: 100px solid transparent;
}
<div class="bottomLeft"></div>
右下：
.bottomRight {
width: 0;height: 0;
border-bottom: 100px solid #000;
border-left: 100px solid transparent;
}
<div class="bottomRight"></div>
原文：http://www.cnblogs.com/AliceLiu/p/5464665.html