CSS实现DIV三角形

#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;
}

#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}

#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}

#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}

#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}

<!-- 外框 -->
<div class="mod-container">
<!-- 小三角部分 -->
<div class="mod-triangle">
<div class="t-border"></div>
<div class="t-inset"></div>
</div>
</div>

/*外框容器*/
.mod-container {
width:100px;
height:60px;
border:1px solid #000;
margin:20px;
background:#fff;
}
/*小三角部分*/
.mod-triangle {
display:block;
position:relative;
left:-23px;
top:18px;
z-index:20;
}
.mod-triangle .t-border,
.mod-triangle .t-inset{
left:0px;
top:0px;
width:0;
height:0;
font-size:0;
overflow:hidden;
position:absolute;
border-width:12px;
/*可在此处更改小三角方向：上-右-下-左（solid的位置）*/
border-style:dashed solid dashed dashed;
}
/*小三角的边框，如果不需要，可将颜色值改变*/
.mod-triangle .t-border{
border-color:transparent #000 transparent transparent;
left:-1px;
}
.mod-triangle .t-inset{
border-color: transparent #fff transparent transparent;
}