css 制作三角形

一. css制作三角符号的步骤

1. 写一个盒子，宽高必须为0

2. 根据自己所要三角形的方向，一个边界设置颜色，显示三角效果

3. 其它3边界设置相同颜色（一般设置白色），就显得设置不同颜色的那一边是个三角

div{
            /*宽高必须为0*/
            width: 0;
            height: 0;
            /*一个边界设置颜色，显示三角效果*/
            border-top: 10px solid red;
            /*其它3边界设置相同颜色，就显得设置不同颜色的那一边是个三角*/
            border-bottom: 10px solid white;
            border-left: 10px solid white;
            border-right: 10px solid white;
}

生成三角结果如下：

可以看到生成的三角是等边三角型，若我们向设置其它想要的三角形，就需要对三角形做一些强化修改，一个场景如下：

要实现这样的效果，就要在之前的基础上，改变边框的宽度，当前场景中将上边框宽度设置大一些就可以

            width: 0;
            height: 0;
            border-style: solid;
            /*只保留右边的边框有颜色*/
            border-color: transparent white transparent transparent;
            /*上边框宽度要大，右边框宽度稍小，其余边框为0*/
            border-width: 20px 12px 0 0;