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

This article introduces the relevant knowledge of "how to use css to achieve triangles". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Implementation methods: 1, the use of zero-width container and transparent border;2, the use of linear gradient linear-gradient;3, the use of "transform:rotate" with "overflow:hidden"; 4, the use of "& # 9660", "& # 9650" and other characters.

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

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.

The simple code is as follows:

Html, body {width: 100%; height: 100%; display: flex;} div {width: 0px; height: 0px; margin: auto;}. Normal {border-top: 50px solid yellowgreen; border-bottom: 50px solid deeppink; border-left: 50px solid bisque; border-right: 50px solid chocolate;}

For containers with zero height and width, set border of different colors:

In this way, if the border on any three sides is transparent, it is very easy to get triangles of all angles:

.top {border: 50px solid transparent; border-bottom: 50px solid deeppink;}. Left {border: 50px solid transparent; border-right: 50px solid deeppink;}. Bottom {border: 50px solid transparent; border-top: 50px solid deeppink;}. Right {border: 50px solid transparent; border-bottom: 50px solid deeppink;}

Use linear-gradient to draw triangles

Then, we use the linear gradient linear-gradient to realize the triangle.

Its principle is also very simple, we achieve a 45 °gradient:

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%);}

Drawing triangles with transform: rotate and overflow: hidden

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);}} draw triangles using characters

OK, the last one, which is somewhat unique, uses characters to represent triangles.

The following lists some decimal Unicode representations of triangle-shaped characters.

◄: ◄ ►: ► ▼: ▼ ▲: ▲⊿: ⊿△: △

For example, we use ▼ to implement a triangular ▼ with the following code:

▼ div {font-size: 100px; color: deeppink;}

The effect is good:

"how to use css to achieve triangles" content is introduced here, thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.