CSS 搞事技巧：border+transparent

介绍

出门忘带电源线，快递到了终于可以继续水文章了。好不容易获得一个面试机会，面试官很 Nice，可惜的是当时处于懵逼状态，错过了大好的机会：

面试官：巴拉巴拉吧……

我：嗯，啊，这个，那（吱吱呜呜）……

面试官：你知道怎么绘制三角形嘛？

我：主要是利用了 border 和 transparent 这两个属性。其余边设置为 transparent，然后将对应的方向设置为需要的颜色即可，一般常用等边，等腰啊来装饰一下。

面试官：那你知道不等边三角形怎么写吗？

我：不就是那么写么（陷入懵逼状态），然后又迅速说用伪元素来模拟一下？

面试官：你分别设置下高度不就好了。

我：……

效果展示：

示例源码、在线示例

三角形原理

通过图形展示能够更明显显示出区别：

1. 简单的正方形

代码：

<div class="square"></div>
复制代码

$square-size = 100px

.square
  width $square-size
  height $square-size
  border 5px solid
  border-color #893615 #E76B56 #A72310 #0C1F22
复制代码

效果图：

加强一下效果：

$square-size = 100px
$border-size = 60px

.square
  width $square-size
  height $square-size
  border $border-size solid
  border-color #893615 #E76B56 #A72310 #0C1F22
复制代码

可以清晰的看到每个边都是一个梯形。

2. 检查正方形

打开控制台即可：

可以看到中间的空白即为我们设置的 100 * 100 ，这是由于我们的盒模型（box-sizing）为 content-box 导致的结果。

那我们将其设置为 border-box ，查看其结果：

由 border-box 可知，由于两边 border 大小为 60，所以 60*2=120 > 100，内部的 width 即为 0。

3. 默认盒模型的正方形

在上方已经说明了，正方形的 size 被挤压为 0 时就会得到三角形的效果。

那么此处就在默认盒模型的情况下创建一个三角形：

$square-size = 0
$border-size = 60px

.square
  width $square-size
  height $square-size
  border $border-size solid
  border-color #893615 #E76B56 #A72310 #0C1F22
复制代码

4. 隐藏不必的边

最后，生成三角形就水到渠成了（保留目标相反方向的颜色），举几个例子。

1. 三角形开角向上：

   $square-size = 0
   $border-size = 60px
   
   .triangle
     width $square-size
     height $square-size
     border $border-size solid transparent
     border-bottom-color #A72310
   复制代码

2. 三角形开角向右：

   $square-size = 0
   $border-size = 60px
   
   .triangle
     width $square-size
     height $square-size
     border $border-size solid transparent
     border-left-color #0C1F22
   复制代码

3. 三角形开角向左上：

   $square-size = 0
   $border-size = 60px
   
   .triangle
     width $square-size
     height $square-size
     border $border-size solid transparent
     border-left-color #0C1F22
     border-top-color #893615
   复制代码

三角形生成器

每次还要想一想怎么写三角形很麻烦，将其可视化，每次只需要点一点就创建一个三角形才是极好的。

友情提示：