How to write a triangle with css
This article mainly explains "how to write a triangle with css". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to write a triangle with css.
1. First of all, we create a new html file in the development tool of html. We name it test.html, and then edit the input code in the file. We know that a special effect of span is the drop-down list, that is, when the mouse is over a div, the original hidden content or secondary menu will appear. The code is as follows:
How to write a triangle 3 in css. After adding the class attributes, we create a new css file in the css folder of the same project, name it test.css, and then code it into the css file. The code and run screenshot are as follows:
two。 So now we start to make an upward triangle, first set the class class in the code, then name the class class attribute uptriangle, and add a link tag to connect to our newly created css file. The code is as follows:
How to write a triangle in css
3. After adding the class attributes, we create a new css file in the css folder of the same project, name it test.css, and then code it into the css file. The code and run screenshot are as follows:
.uptriangle {width:0; height:0; border-left:50px solid transparent; border-right:50px solid transparent; border-bottom:100px solid black;}
4. In the design of this triangle, we mainly use an attribute of transparent, which means transparent. If we want to set the font to black, we can write it as color:black. Similarly, we can use background-color:transparent to set a transparent background. If the use of css style is not very clear, friends can learn by themselves in w3cschool, a free learning platform.
At this point, I believe you have a deeper understanding of "how to write a triangle with css". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
