CSS基础 — 纯CSS实现三角形

利用css样式中的边框（border）属性我们也可以实现三角形
1、假设现在有一个有高度和宽度的正方形盒子（div），给盒子添加边框（适当增加边框的宽度。这样才能看出效果）

效果图1.jpg

2、有高度和宽度时。盒子中间可以看到空白区域，每个边框是成45°角连接，那么现在我们把盒子的宽度和高度都设置为0，来看看效果

效果图2.jpg

3、现在已经有三角形了，就需要根据自己的需求来留下哪一个方向上的三角形了。假设我需要一个向上的三角形，那么左边，上面和右边的三角形就不需要了。把这三个方向上的三角形的颜色设置为透明（transparent）就行了。

效果图3.png

4、上代码

html

css

div{
    /*将div宽高设置为0*/
    width: 0px;
    height: 0px;
    /*边框样式为实线*/
    border-style: solid;
    /*边框宽度*/
    border-width: 30px;
    /*边框颜色粉色*/
    border-color: pink;
    /*其他不需要的方向颜色设置为透明*/
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
     }

既然宽高设置为0就能得到三角形，那么给宽高设置一定的数值就可以得到梯形了

css中修改

div{
      width: 40px;
      height: 40px;
    }

梯形.jpg