CSS高级技巧 之 三角制作

网页中常见的一些三角形，使用CSS直接画出来即可，不必做成图片或者字体图标。

将长和宽设置为0，再给每条边上色，即可在一个正方形中画出四个以正方形中心为顶点的三角形。 

<div class="box1"></div>
<div class="box2"></div>

.box1 {
    width: 0;
    height: 0;
    border-top: 10px solid pink;
    border-right: 10px solid red;
    border-bottom: 10px solid blue;
    border-left: 10px solid green;
}
.box2 {
    width: 0;
    height: 0;
    /* 将其他边框改为透明色，只留上边框为粉色，即可得到一个向下的三角*/
    border: 50px solid transparent;
    border-top-color: pink;
    margin: 0 auto;
}

效果如图：

左侧为box1，右侧为box2

案例࿱