Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of CSS3 linear gradient how to achieve triangles, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this CSS3 linear gradient how to achieve triangles. Let's take a look.

CSS3 linear gradient can realize triangles; just create a 45-degree linear gradient and set the gradient to two fixed colors, one is the triangle color, the other is transparent color, the syntax "linear-gradient (45deg, color value, color value 50%, transparent color 50%, transparent color 100%)".

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

In css3, there are many ways to realize triangles, one of which is to use linear gradients. Next, let's give you a specific introduction.

The principle of using linear gradient linear-gradient to realize triangles is also very simple, we achieve a gradual linear change of 45 °:

Div {width: 100px; height: 100px; background: linear-gradient (45deg, deeppink, yellowgreen);}

Change its color from a gradient to two fixed colors:

Div {width: 100px; height: 100px; background: linear-gradient (45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);}

Just make one of the colors transparent:

Div {background: linear-gradient (45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);}

By rotating rotate or scale, we can also get triangles of different angles and sizes:

Html,body {width: 100% position height: 100% position display: flex;} div {width: 100pxposition height: 100px position margin: auto;}. Rotate {background: linear-gradient (45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);}. Top {background: linear-gradient (45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px); transform: rotate (135deg);}. Left {background: linear-gradient (45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px); transform: rotate (45deg) Bottom {background: linear-gradient (45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px); transform: rotate (- 45deg);}. Right {background: linear-gradient (45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px); transform: rotate (- 135deg);}

This is the end of the article on "how to realize triangles with CSS3 linear gradient". Thank you for reading! I believe that everyone has a certain understanding of "CSS3 linear gradient how to achieve triangles" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

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.