前言

昨天刚好利用掘金的码上掘金画了一个爱心，链接在这里，感兴趣可以阅读。

今天用css画一个三角形。

因为在css画一个正方形或者长方形，很容易，设置对应的宽度和高度就可以了。

但是对于三角形不一样，不能通过宽度和高度来设置，因为宽度和高度不能只设置单边的。

但是边框（border）可以设置任意一边的宽度，还可以设置颜色。

这不是刚好可以用来画三角形吗？

所以，我们可以利用边框（border）来实现三角形。

效果演示

code.juejin.cn/pen/7086857…

三角形

平时我们设置border，就是一句1px solid #666，可以满足大部分场景。

但是你知道上边框和左右边框是以什么为边界的吗？也就是边框之间的边界怎么划分的？

我举个例子

<style>
  .triangle {
    margin: 100px auto;
    width: 100px;
    height: 100px;
    border-style: solid;
    border-width: 15px;
    border-color: red green blue pink;

  }
</style>
<body>
  <div class="triangle"></div>
</body>

哈哈哈，边框这样画，还挺好看的😂

边框是斜边平分的，分成4份。

如果你要把对应的颜色设置透明，则对应的颜色会透明，如果把对应的某个边框宽度设置为0，则那行就被隐藏

上边框颜色设置透明

上边框宽度设置为0

不知道你发现了没有，每个边框都是一个梯形。

如果我们把宽度和高度设置为0，它们不就是三角形了吗？

<style>
  .triangle {
    margin: 100px auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px;
    border-color: red green blue pink;
  }
</style>
<body>
  <div class="triangle"></div>
</body>

可以看到三角形的轮廓已经看到了

然后如果我们可以把其它边框的颜色设置透明，只留一个颜色，那就是三角形了。

<style>
  .triangle {
    margin: 100px auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 60px;
    border-color: transparent transparent blue transparent;
  }
</style>

这个就是一个朝上的等腰三角形。

我们还通过控制border的宽度来实现各式各样的三角形。

直角三角形

<style>
    .triangle {
      margin: 100px auto;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 0px 60px 60px;
      border-color: transparent transparent blue transparent;
    }
</style>

总结

css画三角形主要是利用border的宽度和颜色来实现的，另外需要注意，还需要把元素的宽度和高度设置为0才有效果。