前端面试题 - 如何用 CSS 画一个三角形

这是我在牛客上的回答，实现思路很简单：

还像往常一样，回答完面试官实现思路过后，面试官又接着问：用的哪个属性？

• 思路确实很容易理解，曾经也是想当然地就觉得很简单，也就没有自己动手去实现，所以被问到用的哪个属性时，也是一脸懵，来看一下，相信你看一眼过后，就不会再忘了：

<div class="outer">
  <div class="inner"></div>
</div>

.outer{
  width: 200px;
  height: 200px;
  background-color: pink;
}
.inner{
  width: 0;
  height: 0;

  /* 方法一：四个方向分开写：*/
  border-top: 0px solid transparent;
  border-right:100px solid transparent;
  border-bottom:100px solid blue;
  border-left:100px solid transparent;

  /* 方法二：整合在一起来表示：*/
  border-width: 0 100px 100px 100px;
  border-style: solid;
  border-color: transparent transparent blue transparent;
}

 来看一下效果：

 

其实很简单，我们只需要借助四个方向的边框宽度和颜色，就可以画出一个三角形，调整它们的值，就可以调整形状和颜色。

 

---

• 边框的四个方向都有宽度，都有颜色时 

.inner{
  width: 0;
  height: 0;

  border-width: 100px 100px 100px 100px;
  border-style: solid;
  border-color: yellow gray blue red;
}

效果就是这样的：

• 三角形已经出来了，那么，我们先给上边框宽度设置为0

.inner{      
  width: 0;
  height: 0;
  border-width: 0 100px 100px 100px;
  border-style: solid;
  border-color: yellow gray blue red;
}

效果是这样的：

• 这个时候，我们需要将上、右、左三个方向的颜色换成透明色：

.inner{
  width: 0;
  height: 0;
  border-width: 0 100px 100px 100px;
  border-style: solid;
  border-color: transparent transparent blue transparent;
}

效果就是这样的：

• 这个时候，三角形就出来了，我们来调整一下边框大小，看看是什么样的效果：

.inner{
  width: 0;
  height: 0;
  border-width: 0 100px 100px 200px;
  border-style: solid;
  border-color: transparent transparent blue transparent;
}

.inner{
  width: 0;
  height: 0;
  border-width: 0 100px 200px 200px;
  border-style: solid;
  border-color: transparent transparent blue transparent;
}

是不是很简单~