宽高为0,border设置宽度和颜色。
<div class="triangl"></div>
/** 下三角 **/
/** 上边框设置颜色和宽度,左右设置透明和宽度。不设置下边框 **/
.triangl {
width: 0;
height: 0;
border-top: 10px solid red;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
/** 上三角 **/
/** 下边框设置颜色、宽度,左右边框设置宽度,颜色设置透明,不设置上边border **/
.triangl {
width: 0;
height: 0;
border-bottom: 10px solid red;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
以此类推其他方向