CSS Magic Series: Draw basic shapes (circles, ellipses, etc.) with pure CSS_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. "CSS Magic Series" continues to bring you the use of CSS in web pages and graphics drawing. This article brings you pure CSS to draw basic shapes (circles, ellipses, etc.).

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

Square

#square {	width: 100px;	height: 100px;	background: red;}

　

Rectangle

#rectangle {	width: 200px;	height: 100px;	background: red;}

　

Circle

#circle {	width: 100px;	height: 100px;	background: red;	-moz-border-radius: 50px;	-webkit-border-radius: 50px;	border-radius: 50px;}/* Cleaner, but slightly less support: use "50%" as value */

　

Oval

#oval {	width: 200px;	height: 100px;	background: red;	-moz-border-radius: 100px / 50px;	-webkit-border-radius: 100px / 50px;	border-radius: 100px / 50px;}/* Cleaner, but slightly less support: use "50%" as value */

　

Trapezoid

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

　

Parallelogram

#parallelogram {	width: 150px;	height: 100px;	-webkit-transform: skew(20deg);	   -moz-transform: skew(20deg);	     -o-transform: skew(20deg);	background: red;}

　

Related articles you may be interested in

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