1. Achieve trapezoid
Using the border we can get the trapezoid, first we give a div to add a border, when the border is set four different colors, we can get such a style, we can see here the upper border is a trapezoid, then if we give other borders to set the color for transparent (transparent), You can get a trapezoid. The height of the trapezoid is the width setting of the border.
<!doctype html>
<meta charset= "Utf-8" >
<link rel= "stylesheet" type= "Text/css" href= "Style.css"/>
<body>
<div>
</div>
</body>
div{
width:100px;
height:100px;
margin:80px Auto;
/*border-top:50px solid Pink;
border-left:50px solid Grey;
border-right:50px solid #FFE767;
/*border-top:50px solid Transparent;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-bottom:50px solid #57BA63;
border-top:50px solid Pink;
border-left:50px solid blue;
border-right:50px solid Purple;
border-bottom:50px solid Gray;
}
2. Implementing triangles
With the help of border to realize the trapezoid idea, if the Div content area is 0, the trapezoid can become a triangle, that is, as long as the width and height of the div are set to 0, border set the transparency as needed.
<!doctype html>
<meta charset= "Utf-8" >
<link rel= "stylesheet" type= "Text/css" href= "Style.css"/>
<body>
<div>
</div>
</body>
div{
width:0px;
height:0px;
margin:80px Auto;
/*border-top:50px solid Pink;
border-left:50px solid Grey;
border-right:50px solid #FFE767;
border-top:50px solid Transparent;
border-left:50px solid Transparent;
border-right:50px solid Transparent;
border-bottom:50px solid #57BA63;
}
3. Right triangle
Method One: Remove left border that affects the upper border triangle
div{
width:0px;
height:0px;
margin:80px Auto;
border-top:100px solid Pink;
border-left:0px solid Transparent; Focus here, do not set the left border
border-right:100px solid Transparent;
border-bottom:100px solid Transparent;
}
Method Two: The triangle formed by the top frame and the left border are combined into a right triangle
div{
width:0px;
height:0px;
margin:80px Auto;
border-top:100px solid Pink;
border-left:100px solid pink;//turns transparent to pink
border-right:100px solid Transparent;
border-bottom:100px solid Transparent;
}
Little border is more useful