CSS实现三角形

使用纯CSS来实现三角形，这里就先以等腰三角形来为例：

主要利用的核心是属性是border

1.画一个带边框的普通正方形

<div class="div"></div>
    <style>
      .div {
        width: 100px;
        height: 100px;
        border: 1px solid #66ccff;
      }
    </style>

2.将border的数值调大

 .div {
        width: 100px;
        height: 100px;
        border: 30px solid #66ccff;
      }

3.将border的颜色设置为不一样的

4.将div的宽高都设置为0

可以很清楚的看见我们这时候得到了4个三角形，现在需要做的就是将三角形抠出来

5.想要保留哪个三角形，就保留三角形的颜色，将其他都设置为透明

这样子是不是看上去仿佛实现了三角形了呢？但实际上如果我们给三角形加上一个背景，就会发现div的占位空间并没有发生任何的改变

6.所以我们将解决一下div占位的问题，将三角形的对边的border给去掉

纯CSS实现三角形