Use CSS3 to draw basic graphics

This article mainly introduces the basic graphics of CSS3 painting, circular, oval, triangle and other related materials, the need for friends can refer to the following

CSS3 Round

#css3-circle{width:150px; height:150px; border-radius:50%; Background-color: #232323;}

CSS3 Oval

#css3-elipse{width:200px; height:100px; border-radius:50%; Background-color: #232323;}

CSS3 Triangle

#css3-triangle{width:0; height:0; border-left:100px solid transparent; border-right:100px solid transparent; border-b ottom:150px solid #232323;}

CSS3 Parallelogram

#css3-parallelogram{width:200px; height:100px; background: #232323;-webkit-transform:skew ( -45deg);-moz-transform: Skew ( -45DEG); -o-transform:skew ( -45DEG); Transform:skew ( -45deg);}

CSS3 trapezoid

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

CSS3 Six-point star

#css3-six-star{width:0; height:0; position:relative; border-bottom:100px solid #232323; border-left:50px solid Trans Parent border-right:50px solid Transparent;} #css3-six-star:after{content: ""; width:0; height:0; Position:absolute; Left: -50px; top:35px; border-top:100px solid #232323; border-left:50px solid Transparent; border-right:50px solid Transparent;}

css3 Pentagram

#css3-five-star{width:0px; height:0px; margin:50px 0; position:relative; display:block; color: #232323; border-right : 100px solid transparent; border-bottom:70px solid #232323; border-left:100px solid Transparent; -moz-transform:rotate (35DEG); -webkit-transform:rotate (35DEG); -ms-transform:rotate (35DEG); -o-transform:rotate (35deg);}  #css3-five-star:before{border-bottom:80px solid #232323;; border-left:30px solid transparent; border-right:30px solid Transparent Position:absolute; height:0; width:0; Top: -45px; Left: -63px; Display:block; Content: "; -webkit-transform:rotate ( -35DEG); -moz-transform:rotate ( -35DEG); -ms-transform:rotate ( -35DEG); -o-transform:rotate ( -35deg);} #css3-five-star:after{position:absolute; display:block; color: #232323; top:3px; left: -105px; width:0px; height:0px ; border-right:100px solid Transparent; border-bottom:70px solid #232323; border-left:100px solid Transparent; -webkit-transform:rotate ( -70DEG); -moz-transform:rotate ( -70DEG);-ms-transform:rotate ( -70DEG); -o-transform:rotate ( -70DEG); Content: ';}

css3 Pentagon

#css3-pentagon {position:relative; width:54px; border-width:50px 18px 0; border-style:solid; Border-color: #232323 Transparent;} #css3-pentagon:before {content: ""; Position:absolute; height:0; width:0; Top: -85px; Left: -18px; border-width:0 45px 35px; Border-style:solid; Border-color:transparent transparent #232323;}  CSS3 Hexagon #css3-hexagon {width:100px; height:55px; background: #232323; Position:relative;} #css3-hexagon:before {content: ""; Position:absolute; Top: -25px; left:0; width:0; height:0; border-left:50px solid Transparent; border-right:50px solid Transparent; border-bottom:25px solid #232323; } #css3-hexagon:after {content: ""; Position:absolute; Bottom: -25px; left:0; width:0; height:0; border-left:50px solid Transparent; border-right:50px solid Transparent; border-top:25px solid #232323; }CSS3 heart-shaped #css3-heart {position:relative; width:100px; height:90px;} #css3-heart:before, #css3-heart:after{position:absolute; content: ""; left:50px; Top 0; width:50px; height:80px; Background: #232323; -moz-border-radius:50px 50px 0 0; border-radius:50px 50px 0 0; -webkit-transform:rotate ( -45DEG); -moz-transform:rotate ( -45DEG); -ms-transform:rotate ( -45DEG); -o-transform:rotate ( -45DEG); Transform:rotate ( -45DEG); -webkit-transform-origin:0 100%; -moz-transform-origin:0 100%; -ms-transform-origin:0 100%; -o-transform-origin:0 100%; Transform-origin:0 100%;} #css3-heart:after {left:0;-webkit-transform:rotate (45deg);-moz-transform:rotate (45deg);-ms-transform:rotate ( 45DEG); -o-transform:rotate (45DEG); Transform:rotate (45DEG); -webkit-transform-origin:100% 100%; -moz-transform-origin:100% 100%; -ms-transform-origin:100% 100%; -o-transform-origin:100% 100%; transform-origin:100% 100%;}

CSS3 gossip

#css3-gossip {width:96px; height:48px; background: #f1f1f1; Border-color: #232323; border-style:solid; border-width:2 PX 2px 50px 2px; border-radius:100%; Position:relative;} #css3-gossip:before{  content: "";  Position:absolute;  top:50%;  left:0;  Background: #f1f1f1;  border:18px solid #232323;  border-radius:100%;  width:12px;  height:12px;} #css3-gossip:after {content: ""; Position:absolute; top:50%; left:50%; Background: #232323; border:18px solid #f1f1f1; border-radius:100%; width:12px; height:12px;}

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!

Related recommendations:

Use icon fonts to assist with CSS processing pictures

CSS3 the use of Layer shadows and text shadows