CSS Magic Series: Pure CSS drawing graphics (bricks of various shapes)_html/css

CSS Magic Series: Pure CSS drawing graphics (bricks of various shapes)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:35:02

Original

1158 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.

"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 various shapes of bricks and stones in mathematics.

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

Infinity

#infinity {    position: relative;    width: 212px;    height: 100px;}#infinity:before,#infinity:after {    content: "";    position: absolute;    top: 0;    left: 0;    width: 60px;    height: 60px;    border: 20px solid red;    -moz-border-radius: 50px 50px 0 50px;         border-radius: 50px 50px 0 50px;    -webkit-transform: rotate(-45deg);       -moz-transform: rotate(-45deg);        -ms-transform: rotate(-45deg);         -o-transform: rotate(-45deg);            transform: rotate(-45deg);}#infinity:after {    left: auto;    right: 0;    -moz-border-radius: 50px 50px 50px 0;         border-radius: 50px 50px 50px 0;    -webkit-transform: rotate(45deg);       -moz-transform: rotate(45deg);        -ms-transform: rotate(45deg);         -o-transform: rotate(45deg);            transform: rotate(45deg);}

Copy after login

Diamond Square

#diamond {	width: 0;	height: 0;	border: 50px solid transparent;	border-bottom-color: red;	position: relative;	top: -50px;}#diamond:after {	content: '';	position: absolute;	left: -50px;	top: 50px;	width: 0;	height: 0;	border: 50px solid transparent;	border-top-color: red;}

Copy after login

Diamond Shield

#diamond-shield {	width: 0;	height: 0;	border: 50px solid transparent;	border-bottom: 20px solid red;	position: relative;	top: -50px;}#diamond-shield:after {	content: '';	position: absolute;	left: -50px; top: 20px;	width: 0;	height: 0;	border: 50px solid transparent;	border-top: 70px solid red;}

Copy after login

Diamond Narrow

#diamond-narrow {	width: 0;	height: 0;	border: 50px solid transparent;	border-bottom: 70px solid red;	position: relative;	top: -50px;}#diamond-narrow:after {	content: '';	position: absolute;	left: -50px; top: 70px;	width: 0;	height: 0;	border: 50px solid transparent;	border-top: 70px solid red;}

Copy after login

Cut Diamond

#cut-diamond {    border-style: solid;    border-color: transparent transparent red transparent;    border-width: 0 25px 25px 25px;    height: 0;    width: 50px;    position: relative;    margin: 20px 0 50px 0;}#cut-diamond:after {    content: "";    position: absolute;    top: 25px;    left: -25px;    width: 0;    height: 0;    border-style: solid;    border-color: red transparent transparent transparent;    border-width: 70px 50px 0 50px;}

Copy after login

Related articles you may be interested in

20 Best Stunning Applications of CSS3 in Web Design Recommended 12 Beautiful CSS3 Buttons The implementation plan recommends 10 excellent CSS3 development tools. Shares 50 beautiful CSS3 best application examples. 24 very practical CSS3 tools. The ultimate collection

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