CSS3 new Features Application (3?? ) shape

I. Adaptive ellipse

* Border-radius Features:
* The horizontal and vertical radii can be specified separately, and the value can be a percentage, separated by/(slash), which can be implemented with an adaptive width ellipse.
* You can also specify a different horizontal and vertical radius (half ellipse can be achieved) for four angles separately
* One-fourth ellipse, mainly to adjust the horizontal and vertical radius
* Sample code:

. wrap{            border-radius:50%/30%;            width:60px;            height:80px;            Background:yellow;        }        . wrap02{            width:60px;            height:80px;            Background:yellow;            border-radius:50%/100% 100% 0 0;        }        . wrap03{            width:60px;            height:80px;            Background:yellow;            border-radius:100% 0 0 0;        }

Two, flat-shaped quadrilateral

* Skewx that need to be applied to transform is distorted
> main Solution The container becomes a flat quadrilateral, while the inner text and elements are displayed vertically
* Nested elements, internal elements with skew reverse distortion.
* Nested inner elements must be block, because transform cannot be applied to inline elements.
* Distort with pseudo-elements (: Before)

. wrap{            width:80px;            height:40px;            Transform:skewx ( -45deg);            Background:yellow;        }        . wrap>div{            transform:skewx (45deg);         }        . btn{            position:relative;            padding:10px;        }        . btn:before{            content: ";            Position:absolute;            top:0px;            left:0px;            right:0px;            bottom:0px;            Z-index:-1;            Background: #85a;            Transform:skewx ( -45deg);        }

Three, Diamond

* Apply elements of nesting, the outer layer and the inner elements of each other roate rotation, to achieve octagonal;
* Design Internal elements max-width width of 100%, so that the entire picture can only fill the entire outer div;
* The scale attribute controls the magnification of its picture, by default the center point is the magnification origin (the Pythagorean theorem is used and no additional transform-origin is specified).

. wrap{            width:200px;            Transform:rotate ( -45deg);            Overflow:hidden;        }        . Wrap > img{            transform:rotate (45deg) scale (1.42);             max-width:100%;        }

Four, chamfer effect

* Linear-gradient can be used to set the angle, multi-value and gradient transparency to achieve.
* Also pay attention to the settings of the Background-size and Background-repeat properties to prevent overlapping of backgrounds resulting in effects not being effective

. wrap{            width:200px;            height:100px;            Background: #58a;            Background:linear-gradient ( -135deg, Transparent 15px, #58a 0px) top right,            linear-gradient (135deg,transparent 15px, #655 0px) top left,            linear-gradient ( -45deg, Transparent 15px, #58a 0px) bottom right,             linear-gradient ( 45deg, Transparent 15px, #655 0px) bottom left;            background-size:50% 50%;            background-repeat:no-repeat;        }

* Border-image can be used to achieve chamfer, set the border-image-slice (picture border inward offset) value;
* Border-image use SVG to make pictures
* Border Set width + transparent, plus border-image-slice inward offset creates a border chamfer border;
* Background-clip: To set to Padding-box, otherwise the background will extend to the border.

. wrapsvg{            border:15px solid transparent;            Border-image:1 url (' data:image/svg+xml, <svg xmlns= "Http://www.w3.org/2000/svg" width= "3" height= "3" fill= "%2358a "><polygon points=" 0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2 "/></svg>");            margin-top:50px;            width:200px;            height:100px;             Background: #58a;            Background-clip:padding-box;        }

* Other options
* Using the Clip-path attribute, but not fully supported
* Css4 will give the Corner-path attribute directly to support chamfer

Five, trapezoid pattern

* Learn the fundamentals of transform

A and D represent scaling and cannot be tilted for 0;c and b control; E and F control displacements

* Translate (Displacement): Matrix (1,0,0,1,x,y)
* Scale (ZOOM): Matrix (x,0,0,y,0,0);
* Skew (Tilt): Matrix (1,tany,tanx,1,0,0), because the input is deg (angle), you need to convert the angle to a radian value
* Rotate (rotation): Matrix (cosn,sinn,-sinn,cosn,0,0), Angle converted to radians
* The above values are used in relation to the value of Transform-origin, which is the origin of the position element rotation, can be top,bottom,center, etc., can be specified in x, y, z three coordinate system.
* Perpective: Perspective, can not negative, 0 or percentage, can only be numeric;
* Indicates the distance of the observer to the object being observed
* The farther away the object is, the smaller the object will appear.
* Perspective can only be set at the parent or ancestor level of a deformed element, because the browser will have a perspective on the deformation of its children
* There is no tilt (skew) attribute on the 3d transform.

Six, simple pie chart

* Animated pie chart with the following effects:

The implementation steps are as follows:

* Draw a Yellowgreen circle, and use Linear-gradient to set the value of background-image, realize the function of two colors display half;
* Then add a pseudo-element that inherits the background color of the parent (the real element) and then rotates with the rotate
* To use Margin-left to keep it on the left
* Set its rotation anchor point with Transform-origin
* The animation display code is as follows:

@keyframes spin{            to{transform:rotate (. 5turn);}        }        @keyframes bg{            50%{background-color: #655;}        }        . wrap{            width:100px; height:100px;            border-radius:50%;            Background:yellowgreen;            Background-image:linear-gradient (to right, transparent 50%, #655 0);         }         . wrap::before{            content: ";            Display:block;            margin-left:50%;            Background-color:inherit;            height:100%;             border-radius:0 100% 100% 0/50%;            Transform-origin:left;            Animation:spin 3s linear infinite,                bg 6s step-end Infinite;        }

CSS3 new Features Application (3?? ) shape