为什么这个CSS片段会绘制三角形？

Question

我看到以下代码没有任何评论..

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

结果是绿色三角形。有没有人对它的工作原理有所了解？

Answer 1

边界的角落以45度角相交。

因此只显示一个边框将显示一边与下一边相交的锥形边。

通过使3个边框不可见或与背景颜色相同，我们得到了三角形的错觉。

＆＃13;

＆＃13;

.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;
 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

塑造未来

这种技术创造了一种使用css创建更精细的形状的绝佳方法。

STAR

＆＃13;

＆＃13;

.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; 
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

CHEVRON

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

这是因为你所看到的只是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>