【问题标题】：Why can this CSS snippet draw a triangle? [duplicate]为什么这个 CSS 片段可以画一个三角形？ [复制]
【发布时间】：2016-02-12 13:09:30
【问题描述】：

我看到下面的代码没有任何cmets..

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

&lt;div class="triangle"&gt;&lt;/div&gt;

结果是一个绿色三角形。有没有人知道它为什么起作用？

【问题讨论】：

你指的是所有在css中创建类似形状的“技巧”还是特定的？
我认为他的意思是这个。

标签： css css-shapes

【解决方案1】：

这是因为您看到的只是bottom-border-color。左右边框是透明的，上边框完全没有宽度（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>

【讨论】：

【解决方案2】：

边界的角以 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; 
}

&lt;div class="Star"&gt;&lt;/div&gt;

雪佛龙

.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*/
}

&lt;i class="Chevron"&gt;&lt;/i&gt;

【讨论】：