How to use CSS3 to realize 11 kinds of basic graphics
This article mainly introduces how to use CSS3 to achieve 11 basic graphics, the article is very detailed, has a certain reference value, interested friends must read it!
CSS3 fillet
# css3-circle {
Width:150px
Height:150px
Border-radius:50%
}
CSS3 elliptical css3radius
# css3-elipse {
Width:200px
Height:100px
Border-radius:50%
}
CSS3 triangle
# css3-triangle {
Width:0
Height:0
Border-left:100pxsolidtransparent
Border-right:100pxsolidtransparent
Border-bottom:150pxsolid#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:100pxsolid#232323
Border-left:50pxsolidtransparent
Border-right:50pxsolidtransparent
}
CSS3 hexagonal star
# css3-six-star {
Width:0
Height:0
Position:relative
Border-bottom:100pxsolid#232323
Border-left:50pxsolidtransparent
Border-right:50pxsolidtransparent
} # css3-six-star:after {
Content: ""
Width:0
Height:0
Position:absolute
Left:-50px
Top:35px
Border-top:100pxsolid#232323
Border-left:50pxsolidtransparent
Border-right:50pxsolidtransparent
}
CSS3 pentagram css3transform
# css3-five-star {
Width:0px
Height:0px
Margin:50px0
Position:relative
Display:block
Color:#232323
Border-right:100pxsolidtransparent
Border-bottom:70pxsolid#232323
Border-left:100pxsolidtransparent;-moz-transform:rotate (35deg);-webkit-transform:rotate (35deg);-ms-transform:rotate (35deg);-o-transform:rotate (35deg)
} # css3-five-star:before {
Border-bottom:80pxsolid#232323
Border-left:30pxsolidtransparent
Border-right:30pxsolidtransparent
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:100pxsolidtransparent
Border-bottom:70pxsolid#232323
Border-left:100pxsolidtransparent;-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:50px18px0
Border-style:solid
Border-color:#232323transparent;} # css3-pentagon:before {
Content: ""
Position:absolute
Height:0
Width:0
Top:-85px
Left:-18px
Border-width:045px35px
Border-style:solid
Border-color:transparenttransparent#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:50pxsolidtransparent
Border-right:50pxsolidtransparent
Border-bottom:25pxsolid#232323;} # css3-hexagon:after {
Content: ""
Position:absolute
Bottom:-25px
Left:0
Width:0
Height:0
Border-left:50pxsolidtransparent
Border-right:50pxsolidtransparent
Border-top:25pxsolid#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:50px50px00
Border-radius:50px50px00;-webkit-transform:rotate (- 45deg);-moz-transform:rotate (- 45deg);-ms-transform:rotate (- 45deg);-o-transform:rotate (- 45deg)
Transform:rotate (- 45deg);-webkit-transform-origin:0100%;-moz-transform-origin:0100%;-ms-transform-origin:0100%;-o-transform-origin:0100%
Transform-origin:0100%
} # 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:1000%;-moz-transform-origin:1000%;-ms-transform-origin:1000%;-o-transform-origin:1000%
Transform-origin:1000%
}
CSS3 gossip
# css3-gossip {
Width:96px
Height:48px
Background:#f1f1f1
Border-color:#232323
Border-style:solid
Border-width:2px2px50px2px
Border-radius:100%
Position:relative
} # css3-gossip:before {
Content: ""
Position:absolute
Top:50%
Left:0
Background:#f1f1f1
Border:18pxsolid#232323
Border-radius:100%
Width:12px
Height:12px
} # css3-gossip:after {
Content: ""
Position:absolute
Top:50%
Left:50%
Background:#232323
Border:18pxsolid#f1f1f1
Border-radius:100%
Width:12px
Height:12px
}
The above is all the content of the article "how to use CSS3 to achieve 11 basic graphics". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!
