The main idea of using css to draw a triangle is to set the boder property, width, height and color.
Renderings:
Idea: The height and width of the box must be 0, and the presented effect is completely supported by the upper, lower, left, and right borders of the box.
First of all, the thickness of the surrounding borders can be adjusted according to your own needs (I take 100px), and the dashed and solid lines are all available, and they are all transparent colors (covered by the color behind).
First, the borders in the four directions (top, bottom, left, and right) are all set in color. In order to distinguish them, different colors are set, and finally the color of the first picture in the above picture will be displayed.
.d{
width: 0;
height: 0;
border: 100px solid transparent;
}
If only a certain direction is required, such as the sharp corner is upward (red in the picture above), then only border-bottom-color can be set.
.d{
border-bottom-color: #FF4500;
border-top-color: rgb(0, 221, 255);
border-left-color: pink ;
border-right-color: rgb(255, 196, 0);
}Full code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.d{
/*盒子的高度一定要是0才行*/
width: 0;
height: 0;
/*给盒子的边框设置厚度、实线、透明颜色*/
border: 100px solid transparent;
/*分别设置四个方向的边框*/
border-bottom-color: #FF4500;
border-top-color: rgb(0, 221, 255);
border-left-color: pink ;
border-right-color: rgb(255, 196, 0);
}
</style>
</head>
<body>
<h3>三角形</h3>
<div class="d"></div>
</body>
</html>
Thanks for reading, I hope it helps you!