First let’s look at the following code in the page:

<! Doctype HTML > < HTML > <head> <meta charset=" utF-8 "> </title> <style>. height: 0; border: 300px solid red; border-top-color: red; border-bottom-color: blue; border-left-color: pink; border-right-color: yellow; } </style> </head> <body> <div class="triangle"></div> </body> </html>Copy the code



Seeing this, we can get an idea of what the triangle should look like. We can set border-bottom to None so that the bottom half of the square is gone. Okay

border-top: none;
Copy the code

The renderings are as follows:



Then we set the color of border-left and border-right to transparent, leaving only border-bottom

<! Doctype HTML > < HTML > <head> <meta charset=" utF-8 "> </title> <style>. height: 0; border: 100px solid transparent; border-top-color: black; border-bottom: none; border-left-color: transparent; border-right-color: transparent; } </style> </head> <body> <div class="triangle"></div> </body> </html>Copy the code

The renderings are as follows:

Ok, so now that we’ve written the triangle, and there are other triangles like it, you can do it this way, and I’m not going to go through them. Finally, I wish you all a happy study.