CSS3 tips for drawing various basic graphics

CSS3 is an upgraded version of CSS technology, and CSS3 language development is developing towards modularity. The previous specification was too large and complex as a module, so it was broken down into smaller modules and more new modules were added. These modules include: box model, list module, hyperlink method, language module, background and border, text effects, multi-column layout, etc. Below we will share with you some tutorials on using CSS3 to create some simple graphics.

CSS3 Circle

#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-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 Hexagram

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

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

That’s it Have you learned how to use CSS3 to complete basic small graphics?

Related tutorials:

css3 simple graphics drawing tutorial

Realization of circular motion trajectory in css3 animation

How to achieve clock effect with css3

The above is the detailed content of CSS3 tips for drawing various basic graphics. For more information, please follow other related articles on the PHP Chinese website!