Chapter 3
1. Ellipse
The implementation of the ellipse relies primarily on the Border-radius property, which determines the radius of the bounding rectangle fillet, can specify the value px, or it can be displayed as a percentage
And this property is very flexible, Four corners can be set separately
width:200px;height:200px; Square--------------------------------------------------------border-radius:100px; Round border-radius:50%/50%; Horizontal radius/Vertical radius--------------------------------------------------------border-radius:50px/20px; Oval Corner
--------------------------------------------------------
border-radius:50%/100% 100% 0 0 //half ellipse, bottom vertical fillet 0 o'clock horizontal fillet also automatically 0, no need to specify again
2. Parallelogram
The implementation of the parallelogram relies on the Transform:skew () to choose the direction of the tilt x-axis or y-axis
The question to solve is: How to keep the content constant while the container is tilted?
<a href= "#yolo" class= "button" ><div>click me</div></a>------------------------------- --------------------. Button{Transform:skewx (45deg); }. button > div{Transform:skewx ( -45deg); }//Text settings reverse tilt to counteract the tilt of the container. Button{Display:Inline-block;padding:. 5em 1em;Border:0;margin:. 5em;background:#58a;Color: White;Text-transform:Uppercase;text-decoration:None;Font:Bold 200%/1 Sans-serif;}
. Button{//Host elementposition:relative;Display:Inline-block;padding:. 5em 1em;Border:0;margin:. 5em;background:Transparent;Color: White;Text-transform:Uppercase;text-decoration:None;Font:Bold 200%/1 Sans-serif;}. Button::before{//pseudo elementcontent:"';/*To generate the box*/position:Absolute;Top:0; Right:0;Bottom:0; Left:0;Z-index:-1;background:#58a;Transform:skew (45deg);}
You want to deform the element without deforming the content can be used
3. Simple pie chart
There are two ways to implement pie charts: gradients and SVG
Gradient combined with pseudo-elements to achieve rotation, note that after more than 50% to reverse the pseudo-element background color;
In this way, dynamic rotation animations can also be used as a display for loading progress
<div class= "pie" ></div>------------------------------------------------------------------------ --------------------. Pie{width:100px;Height:100px;Border-radius:50%;background:Yellowgreen;Background-image:Linear-gradient (to right, transparent 50%, CurrentColor 0);Color:#655;}. Pie::before{content:"';Display:Block;Margin-left:50%;Height:100%;Border-radius:0 100% 100% 0/50%;Background-color:Inherit;Transform-origin: Left;Transform:Rotate (0.15turn); Set Rotation Angle}
The SVG implementation is to draw circles and strokes first, then draw a larger circle on the lower level of the stroke.
The first parameter of the dashed Edge property Stroke-dasharray indicates the dash length, and the second is the gap length between the dashed lines
<svg width= "" height= "" ><circle r= "" "" cx= "cy=" >------------------------------------------svg { Transform : rotate ( -90deg) ; background : Yellowgreen ; Border-radius : 50% ;} circle { fill : Yellowgreen ; stroke : #655 ; Stroke-width : 50 ; //the width is twice times the radius stroke-dasharray : 50 160; //The second parameter is perimeter }
CSS Disclosure (iii) shape