Home>Article>Web Front-end> 11 basic graphics codes implemented by CSS3

11 basic graphics codes implemented by CSS3

不言
不言 forward
2019-04-03 11:50:09 2728browse

This article brings you 11 basic graphics codes implemented by CSS3. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

CSS3 rounded corners

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

CSS3 ellipsecss3 radius

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

CSS3 triangle

#css3-triangle{ width: 0; height: 0; border-left: 100px solid transparent; border-right: 100px solid transparent; border-bottom: 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-pointed star

#css3-six-star{ width: 0; height: 0; position: relative; border-bottom: 100px solid #232323; border-left: 50px solid transparent; 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 five-pointed starcss3 transform

#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

#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%; }

CSS3Gossip

#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; }

【Related recommendations:CSS3 video tutorial

The above is the detailed content of 11 basic graphics codes implemented by CSS3. For more information, please follow other related articles on the PHP Chinese website!

Statement:
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete