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. The
* Also needs to be aware of the settings of the Background-size and Background-repeat properties to prevent overlapping backgrounds from causing 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) bottomleft; background-size: 50% 50%; background-repeat: no-repeat; }
* You can use Border-image to achieve chamfer, set Border-image-slice (picture border Inward Offset) value;
* border-image use SVG to make picture
* Border Set width + transparency, Plus the border-image-slice inward offset creates a border chamfer border;
* background-clip: to be 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, &L T;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 ; : 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 shape of new features applied