Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.