Draw triangles with CSS_html/css_WEB-ITnose

Introduction

Drawing triangles with CSS is just a simple application of the border property. If you pay more attention when using the border attribute, you will discover the tricks. Next, let’s look at the following code first:

HTML代码：<div class="test"></div>----------CSS代码：.test{    width: 10px;    height: 10px;    border-top: 50px solid black;    border-right: 50px solid red;    border-bottom: 50px solid blue;    border-left: 50px solid orange;}

The effect is as follows:

It is not difficult to see that when the width and height of the box content are much smaller than the border, the border is displayed as Isosceles trapezoid. From this we can infer that when we set the width and height of the div to 0, the white square representing the content of the box will disappear, and at the same time, the border will appear as an isosceles triangle. The code is as follows:

HTML代码：<div class="test"></div>----------CSS代码：.test{    width: 0;    height: 0;    border-top: 50px solid black;    border-right: 50px solid red;    border-bottom: 50px solid blue;    border-left: 50px solid orange;}

The effect is as follows:

Drawing

At this point, we can draw triangles with different orientations based on the above content, for example : When we need an upward-facing triangle, there is no need to set the upper border, and so on for the rest. The code is as follows:

HTML代码：<div class="test1"></div><div class="test2"></div><div class="test3"></div><div class="test4"></div>----------CSS代码：.test1{    width: 0;    height: 0;    border-right: 50px solid transparent;    border-bottom: 50px solid blue;    border-left: 50px solid transparent;}.test2{    width: 0;    height: 0;    border-top: 50px solid transparent;    border-bottom: 50px solid transparent;    border-left: 50px solid orange;}.test3{    width: 0;    height: 0;    border-top: 50px solid black;    border-right: 50px solid transparent;    border-left: 50px solid transparent;}.test4{    width: 0;    height: 0;    border-top: 50px solid transparent;    border-right: 50px solid red;    border-bottom: 50px solid transparent;

The effect is as follows:

Go further

In the code to implement drawing, we will notice that each triangle has two The border-color property of the border is set to transparent. As for why, we can try it by changing the attribute value. The code is as follows:

HTML代码：<div class="test"></div>CSS代码：.test{    width: 0;    height: 0;    border-right: 50px solid red;    border-bottom: 50px solid blue;    border-left: 50px solid orange;}

The effect is as follows:

Compare the effect of fully setting the border and setting one less border above As shown in the figure, it can be seen that the orange and red triangles are each missing the upper half. It can be seen that we must set three borders, and the border-color property of the borders on both sides should be set to transparent.

Summary

Writing this summary is because I saw someone raising this issue recently, and I remembered my original attempt, so I wrote an article. The writing is relatively simple. I will enrich it when I have the opportunity in the future. Please give me your guidance.

Regarding using CSS to draw simple graphics, it is recommended to learn ICONO: pure CSS icons