CSS Magic Series: Pure CSS Drawing Triangles (Various Angle)_html/css_WEB-ITnose

Our web pages have ever-changing styles because of CSS. This seemingly simple style language is very flexible in use. As long as you use your creativity, you can achieve many more unimaginable effects. Especially with the widespread use of CSS3, more novel CSS works have emerged.

Today this article starts the "Variety of CSS Series" to bring you the use of CSS in web pages and graphics drawing. First of all, I will introduce you to the popular CSS triangle drawing method.

Related articles you may be interested in

35 amazing CSS3 animation effect demonstrations on the Web Frontier: A set of extremely gorgeous CSS3 effects on the Web Frontier: Ten amazing CSS3 applications The annual feast of carefully selected online CSS3 code generation tools: the most exciting CSS3 tutorials in 2012

Triangle Up

#triangle-up {	width: 0;	height: 0;	border-left: 50px solid transparent;	border-right: 50px solid transparent;	border-bottom: 100px solid red;}

　

Triangle Down

#triangle-down {	width: 0;	height: 0;	border-left: 50px solid transparent;	border-right: 50px solid transparent;	border-top: 100px solid red;}

　

Triangle Left

#triangle-left {	width: 0;	height: 0;	border-top: 50px solid transparent;	border-right: 100px solid red;	border-bottom: 50px solid transparent;}

　

Triangle Right

#triangle-right {	width: 0;	height: 0;	border-top: 50px solid transparent;	border-left: 100px solid red;	border-bottom: 50px solid transparent;}

　

Triangle Top Left

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

　

Triangle Top Right

#triangle-topright {	width: 0;	height: 0;	border-top: 100px solid red;	border-left: 100px solid transparent;}

　

Triangle Bottom Left

#triangle-bottomleft {	width: 0;	height: 0;	border-bottom: 100px solid red;	border-right: 100px solid transparent;}

　

Triangle Bottom Right

#triangle-bottomright {	width: 0;	height: 0;	border-bottom: 100px solid red;	border-left: 100px solid transparent;}

You may feel Related articles of interest

The 20 best amazing applications of CSS3 in web design. Recommend 12 beautiful CSS3 button implementations. Recommend 10 excellent CSS3 development tools. Share 50 beautiful CSS3. 24 best application examples. The ultimate collection of very practical CSS3 tools

Link to this article: Variety CSS Series: Pure CSS Drawing Triangles (Various Directions)

Compiled Source: Dream Sky ◆ Pay attention to front-end development technology ◆ Share web design resources