Using CSS to create graphic effects

Objective

about how to use CSS to make graphics, such as round, semicircular, triangular and other related tutorials is quite a lot of, today I mainly want to explain some of the implementation of the demo inside the principle, say not much, start it

only one HTML element is used for all of the following. any type of CSS, as long as it is supported in at least one browser.

I. Achieving a heart-shaped

#heart{position:relative;width:100px;Height:90px; }#heart: Before{position:Absolute;content: ""; Left:50px;Top:0;width:50px;Height:80px;background:Red;-moz-border-radius:50px 50px 0 0;-webkit-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%; }#heart: after{ Left:0;position:Absolute;content: "";Top:0;width:50px;Height:80px;background:Red;-moz-border-radius:50px 50px 0 0;-webkit-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:100% 100%;-moz-transform-origin:100% 100%;-ms-transform-origin:100% 100%;-o-transform-origin:100% 100%;Transform-origin:100% 100%; }

Effect

Principle: This heart shape is mainly composed of two overlapping parts

border-radius:50px 50px 0 0; /*  */border-top-left-radius:50px;border-top-right-radius:50px;

Achieve the following effects

Then the Transfrom transform is used to get the following, then the overlapping composition.

Tip: Rationalize the use of pseudo-elements and CSS Border-radius properties and transform transformation Properties

Two. Pie chart

Even the simplest form of only two colors is not easy to create with web technology

Although this thing is not as hard to achieve as it once seemed, there is no direct and simple way. However, there are many better, more maintainable ways to implement it now.

. Pie {  width:50px;   height:50px;   position:relative;   background: linear-gradient (90deg, #eee 50%,green 0);    Border-radius:50%}

First step: Draw a circle First (the pie chart effect color is green)

Step Two: Add a mask with pseudo-elements

. Pie::before {  position:absolute;   content:";   width:50%;   height:100%;   background: #eee; /*  */*  **  border-radius:50px 0 0 50px; }

The third step: using the Transform transformation to change the angle, to achieve their own angle of need

  Transform:rotate (20deg);  transform-origin:100% 50%;

Note: The rotation transformation Center of a pseudo-element should be set to a circle point

Conclusion

For the time being, we have explained two graphs, which are made by using CSS or some of the CSS3 properties, and you can also click Css3-tricks to provide more than 10 kinds of graphics in the "Shapes of css". Because some graphics effects use some of the properties of CSS3, the effects on IE may not be displayed. Using CSS to make triangles and circles has a lot of effect, especially for making tips effect

Using CSS to create graphic effects