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

This article mainly explains "what are the methods of realizing triangles in css3". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the methods of realizing triangles in css3?"

Css3 can realize triangles, there are many methods: 1, draw triangles with zero height and width container and transparent border; 2, draw triangles with linear gradient linear-gradient; 3, draw triangles with conic-gradient; 4, draw triangles with clip-path, etc.

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

There are many ways to implement triangles in css3. Here's a look:

1. Use border to draw triangles

The realization of triangles using border should be mastered by most people, and it often appears in all kinds of sutras, using a container with zero height and width and a transparent border implementation.

Html, body {width: 100%; height: 100%; display: flex;} div {width: 0px; height: 0px; margin: auto;}. Top {border: 50px solid transparent; border-bottom: 50px solid deeppink;}. Left {border: 50px solid deeppink;}. Bottom {border: 50px solid transparent; border-top: 50px solid deeppink;}. Right {border: 50px solid transparent; border-bottom: 50px solid deeppink;}

2. Use linear-gradient to draw triangles

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

3. Use conic-gradient to draw triangles

Or gradient, above we use linear gradient to achieve triangles, interestingly, in the gradient family, angular gradient conic-gradient can also be used to achieve triangles.

The method is that the center point of the angular gradient can be set, and the center point similar to the radial gradient can also be set.

We set the center point of the angular gradient to 50%, that is, center top, the top middle of the container, and then proceed the angular gradient to a certain range of angles, all of which are triangular shapes.

Suppose we have a container of 200px x 100px height and width, and set the center point of the angular gradient to 50%:

Also, set it to draw an angular gradient from 90 °. The diagram is as follows:

As you can see, at the beginning, the angular gradient figure is all triangles before the second side. If we choose the appropriate angle, it is very easy to get a triangle.

.normal {background: conic-gradient (from 90deg at 50 0, deeppink 0, deeppink 45deg, transparent 45.1deg);}. Acute {background: conic-gradient (from 90deg at 50 0, transparent 0, transparent 45deg, deeppink 45.1deg, deeppink 135deg, transparent 1deg);}

4. Transform: rotate and overflow: hidden draw triangles

This method is relatively conventional, using transform: rotate with overflow: hidden. You can understand it as soon as you see it, and you can learn it as soon as you learn. the simple animation diagram is as follows:

Set the rotation center of the drawing in the lower left corner left bottom, rotate, with overflow: hidden.

The complete code:

Html, body {width: 100%; height: 100%; display: flex;} div {width: 141px; height: 100px; margin: auto;}. Demo-opacity {overflow: hidden;} .demo, .demo-opacity {position: relative; border: 1px solid # 000; background: unset; &:: before {content: "; position: absolute; top: 0; left: 0 Right: 0; bottom: 0; animation: conicmove 3s infinite linear; background: deeppink; transform-origin: left bottom; z-index:-1;}}. Triangle {position: relative; background: unset; overflow: hidden; &:: before {content: "; position: absolute; top: 0; left: 0 Right: 0; bottom: 0; background: deeppink; transform-origin: left bottom; transform: rotate (45deg); z-index:-1;}} @ keyframes conicmove {100% {transform: rotate (45deg);}}

5. Use clip-path to draw triangles

A very interesting CSS attribute for clip-path.

The clip-path CSS attribute creates a clipping area that can be displayed only in portions of the element. The part within the area shows that it is hidden outside the area. The cut area is the path defined by the referenced embedded URL or the path to the external SVG.

That is, you can use clip-path to tailor a container to anything we want.

Through three coordinate points, a polygon is realized, the extra space is cut out, and the code is very simple:

Div {background: deeppink; clip-path: polygon (00,100,0,100%, 00);}

Thank you for your reading, the above is the content of "what are the methods of realizing triangles in css3?" after the study of this article, I believe you have a deeper understanding of what the methods of triangles in css3 have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.