How to write triangles in css3

This article is about how to write triangles in css3. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In css, you can use the linear-gradient () function to draw triangles, and the syntax is "background:linear-gradient (45deg, color value, color value 50% mine100%)".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

The method of writing triangles by css3

In css, you can use the linear gradient of linear-gradient function to draw triangles. The function syntax is:

Background: linear-gradient (direction, color-stop1, color-stop2,...)

Among them, it should be noted that:

The direction parameter indicates that the direction (or angle) of the gradient is specified with an angle value.

Color-stop1, color-stop2,... Lets you specify the start and end color of the gradient.

The linear-gradient () function is used to create a picture that represents a linear gradient of two or more colors.

To create a linear gradient, you need to specify two colors, and you can also achieve a gradient in different directions (specified as an angle). If you do not specify a direction, the default gradient is from top to bottom.

Next, let's take a look at the application of this attribute through an example, as follows:

Document div {width: 200px; height: 200px; background: linear-gradient (45deg, red, red 50%, blue 50%, blue 100%);}

Output result:

Then we can get the triangle by setting half of the colors to transparent. The example is as follows:

Document div {width: 200px; height: 200px; background: linear-gradient (45deg, red, red 50%, transparent 50%, transparent 100%);}

Output result:

Thank you for reading! This is the end of the article on "how to write triangles in css3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!