Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.