CSS Disclosure (iii) shape

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