Why can this CSS snippet draw a triangle?
This question already has an answer here:
Corners of a border meet at 45 degree angles.
So showing only one border will show the tapered edges where one side meets the next.
By making 3 of the borders invisible or the same colour as the background we get the illusion of a triangle.
.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> It's because all you're seeing is the bottom-border-color . The left and right borders are transparent, and the top border has no width at all ( border-top-width:0; ).
Element borders meet at an angle calculated based on the widths of the two borders. So if the borders are both the same width, the angle is 45 degrees. Unequal border widths will create other angles.
Because the .triangle element has no width or height, those angles converge at a single point. The code below will help demonstrate the concept:
.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>上一篇: 与有角度的形状的横幅