用 CSS 画一个三角形 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第1天

通常我们在页面中如果需要三角形或者其他图形，可以以图片的形式添加，但是居然用 CSS 就可以直接实现，韩老师的 CSS 课程属实是惊艳到我了，马上来复盘一下~~~

1、首先画一个平平无奇的盒子，设置每条边为不一样的颜色👇

<style>
    div {
      width: 100px;
      height: 100px;
      margin: 100px auto;

      border: 1px solid;
      border-top-color: skyblue;
      border-right-color: orange;
      border-bottom-color: pink;
      border-left-color: green;
    }
</style>
  
<body>
  <div></div>
</body>

那么就可以得到👉

2、现在还是一个平平无奇的盒子，我们将边框加粗看看👇

当边框值设为100px时可以看到，四条边框在交界处并不是简单的覆盖，而是以一种斜面的方式相交，中间的空白区域为盒子的内容区域。那如果我们把内容区域设为0，岂不是就可以👇

出现了，变成了四个三角形！

3、这时候只要我们选择性的将某三条边设置为透明，就可以得到四个方向的三角形啦~

4、需要注意的是，虽然其他部分被设置为不可见，但是还是会占用文档流中的位置。如果想要与其他元素一起配合使用，比如指示方向，或者后续操作步骤什么的，可以结合定位方法一起使用👇

PS. 改变设置边框的边的数量，可以得到其他方向的三角形👇

如果大家有别的 CSS 技巧欢迎一起讨论哦！！