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

WBOY
Release: 2016-06-24 12:34:34
Original
1160 people have browsed it

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;}
Copy after login

 

Triangle Down

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

 

Triangle Left

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

 

Triangle Right

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

 

Triangle Top Left

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

 

Triangle Top Right

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

 

Triangle Bottom Left

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

 

Triangle Bottom Right

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

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!