Use css to simply draw a triangle
1. Let's take a look at the division of borders
.demo{
width:100px;
height:100px;
border:3px red solid;
}
2. What will it look like when the width of the box is 0
.demo{
width:0;
height:0;
border: 40px solid;
border-color: red blue red blue;
}
3. Use transparent to set transparency to have different triangles
<style>
.main {
display: flex;
}
.one {
width: 0;
height: 0;
border: 10px solid transparent;
border-left-color: red;
}
.two {
width: 0;
height: 0;
border: 10px solid transparent;
border-right-color: red;
}
.three {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: red;
}
.four {
width: 0;
height: 0;
border: 10px solid transparent;
border-bottom-color: red;
}
</style>
</head>
<body>
<div class="main">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
</div>
</body>
4. Set one side to 0 to get a right triangle
.one {
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: red;
border-top: 0;
}
Second, draw a trapezoid
According to the principle of drawing triangles, set a width or height according to the conditions
width: 200px;
height:0;
border: 50px solid transparent;
border-bottom-color: red;
Draw three parallelograms
Mainly use the transform of css3 : skew(x-angle,y-angle) to define the 2D skew transformation along the X and Y axis.
.city {
padding: 5px 20px;
border: 1px solid #44a5fc;
color: #333;
transform: skew(-20deg);
}
<div class="city">武汉</div>
Draw four obtuse triangles
Mainly use CSS3 **transform: skew(x-angle,y-angle) to define the 2D skew transformation along the X and Y axis. **Draw an obtuse triangle
.city {
width: 0;
height: 0;
border:30px solid transparent;
border-bottom-color:#44a5fc;
border-right-color:#44a5fc;
transform: skew(-30deg);
}
<div class="city"></div>
