为什么这段CSS代码可以画一个三角形？

Question

我看到下面这段没有任何注释的代码：

.triangle {
    border-color: transparent;
    border-bottom-color: green;
    border-style: solid;
    border-width:  300px;
    border-top-width:0;
    height: 0;
    width: 0
}

<div class="triangle"></div>

结果是一个绿色的三角形。有人对为什么它有效果有想法吗？

- Hanfei Sun

---

你是指在CSS中创建这样形状的所有“技巧”，还是特定的一种？ - Alex Char

我认为他特别指的是这一个。 - Matthijs van Hest

Answer 1

边框的角在45度角相遇。

因此，仅显示一个边框将显示锥形边缘，其中一侧与下一侧相遇。

通过将3个边框设置为不可见或与背景颜色相同，我们会得到三角形的幻觉。

.bdr1{
  height:100px;
  width:100px;
  display:block;
  border:25px solid;
  border-color:red blue green black;
 }
.bdr2{
  height:0;
  width:0;
  display:block;
  border:100px solid;
  border-color:red blue green black;
 }
.bdr3{
  height:0;
  width:0;
  display:block;
  border:100px solid;
  border-color:red white white white;
 }

<div class="bdr1"></div><br/>
<div class="bdr2"></div><br/>
<div class="bdr3"></div>

---

塑造未来

这种技术可以通过 CSS 创造更多复杂的形状。

星形

.Star{ 
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-bottom: 100px solid red; 
  position: relative; 
} 
.Star:after { 
  width: 0; height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-top: 100px solid red;
  position: absolute; content: ""; 
  top: 30px; 
  left: -50px; 
}

<div class="Star"></div>

---

切尔文

---

.Chevron{
    position:relative;
    display:block;
    height:50px;/*height should be double border*/
}
.Chevron:before,
.Chevron:after{
    position:absolute;
    display:block;
    content:"";
    border:25px solid transparent;/*adjust size*/
}
/*Change four 'top' values below to rotate (top/right/bottom/left)*/
.Chevron:before{
    top:0;
    border-top-color:#b00;/*Chevron Color*/
}
.Chevron:after{
    top:-10px;/*adjust thickness*/
    border-top-color:#fff;/*Match background colour*/
}

<i class="Chevron"></i>

- DreamTeK

Answer 2

由于您看到的只是底部边框颜色，左右边框是透明的，而顶部边框根本没有宽度（border-top-width:0;）。

元素边框以基于两个边框的宽度计算的角度相遇。因此，如果边框宽度相同，则角度为45度。不同的边框宽度将创建其他角度。

由于 .triangle 元素没有宽度或高度，这些角度会汇聚到一个单一点。下面的代码将有助于演示这个概念：

    .borders {
        border-bottom-color: green;
        border-left-color: red;
        border-right-color: blue;
        border-top-color: pink;
        border-style: solid;
        border-width:  50px;
        height: 50px;
        width: 50px;
    }

    .triangles {
        border-bottom-color: green;
        border-left-color: red;
        border-right-color: blue;
        border-top-color: pink;
        border-style: solid;
        border-width:  50px;
        height: 0;
        width: 0;
    }

    .triangle {
        border-color: transparent;
        border-bottom-color: green;
        border-style: solid;
        border-width:  50px;
        height: 0;
        width: 0;
    }

<div class="borders"></div>
<hr>
<div class="triangles"></div>
<hr>
<div class="triangle"></div>

- Alex