How to make a triangle in css: first create an HTML sample file; then create a p; and finally achieve the triangle effect through attributes such as "border-color: transparent transparent red transparent;".

The operating environment of this article: windows7 system, HTML5&&CSS3 version, DELL G3 computer

How to make a triangle in css?

Teach you how to make a triangle with css

Today Max shares a technique for making a triangle with css~
How to make a triangle? QAQ? ? ?
No hurry, no rush, let’s do it bit by bit.

Production method

First we write a p:

.triangle{
    height: 100px;
    width: 100px;
    border:100px solid ;
    border-color: red orange blue purple;
}

The effect is as follows:

Then The p of this class named p1 is a square with a width and height of 100px, its border is 100px, and the top, bottom, left and right borders are red, blue, purple, and orange. (Isn’t the pattern very beautiful?)
Then you may ask, what does this have to do with triangles?
Come on, let's take the next step: set the width and height of p to 0;
You will find that there is a four-color square on the screen, and this square happens to be composed of four triangular borders.
At this time, just take the direction you want and set the other triangles to transparent.
Here to remind everyone, the attribute transparency is (transparent).
For example, if we want a red triangle with an upward arrow, the code is as follows:

.triangle-red{
    height: 0px;
    width: 0px;
    border:100px solid ;
    border-color: transparent transparent red transparent;
}

The effect is as follows:

Hurry up and try it! We can also make triangles with upper left, lower left, upper right and lower right, for example upper left:

.triangle-red{
    height: 0px;
    width: 0px;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

Rendering:

Recommended study: "css video tutorial》

The above is the detailed content of How to make a triangle in css. For more information, please follow other related articles on the PHP Chinese website!