CSS3 drawing a variety of basic graphics tips

CSS3 is an upgraded version of CSS technology, and CSS3 language development is evolving towards modularity. The previous specification was too large and complex to be a module, so it was broken down into smaller modules, and more new modules were added. These modules include: Box model, List module, hyperlink mode, language module, background and border, text effect, multi-column layout, etc. Let's share some tutorials for making some simple graphics with CSS3.

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 Shape

#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:2px 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;}