A summary of the shape of the new CSS3 feature

CSS3 is the upgrade version of CSS, which also appeared a lot of new features, this article mainly introduces the CSS3 new features applied shape summary, very practical value, the need for friends can refer to, hope to help everyone.

I. Adaptive ellipse

Border-radius Features:

• You can specify the horizontal and vertical radii individually, and the values can be percentages, separated by A/(slash) (you can implement an adaptive width ellipse).

• You can also specify a different horizontal and vertical radius of four angles (half ellipse can be achieved)

• One-fourth ellipse, mainly to adjust the horizontal and vertical radius

Example 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

• The main solution is to make the container a flat quadrilateral, while the inner text and elements are displayed vertically

• Nested elements, the inner elements are twisted backwards with skew. Nested inner elements must be block because transform cannot be applied on inline elements.

• Distort with pseudo-elements (: Before)

. wrap{            width:80px;            height:40px;            Transform:skewx ( -45deg);            Background:yellow;        }        . wrap>p{            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

• The nesting of the elements is applied, the outer layer and the inner elements roate with each other, realizing the octagonal;

• Design internal elements max-width width of 100%, so that the entire picture can only fill the entire outer layer of p;

• The scale property 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

• The 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 the overlap of the background from causing the effects to not take effect

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

• You can use Border-image to achieve the chamfer, set the border-image-slice (picture border inward offset) value;

• Border-image using SVG to make pictures

• Border Set width + transparency, 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 programmes

• Using the Clip-path property, but not fully supported

• CSS4 will directly give the Corner-path attribute to support chamfer

Five, trapezoid pattern

Understand 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 (Scaling): 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 rotation of the positioning element, which can be top,bottom,center and so on, and can be specified in x, y, z three coordinate systems

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 perspective is from the object, the smaller the object will appear.

• A perspective can only be set at the parent or ancestor level of a deformed element, because the browser creates a perspective for the deformation of its children

• There is no skew (skew) property 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 the linear-gradient to set the value of background-image, to achieve the function of two colors each 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.

• Setting its rotation anchor point with Transform-origin

The animation shows the following code:

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