Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "Css3 new features of the application of the shape of the sample analysis", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn the "Css3 new features of the application of the shape of the sample analysis" of this article.

1. Adaptive ellipse

Border-radius features:

Horizontal and vertical radii can be specified separately, and the values can be percentages separated by / (slash) (adaptive width ellipses can be achieved).

You can also specify horizontal and vertical radii with four different angles separately (semi-ellipse can be achieved)

1/4 ellipses, mainly adjusting horizontal and vertical radii

Sample code:

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

2. Flat quadrilateral

Need to apply skewX to transform to twist

The main solution is that the container becomes a flat quadrilateral, while the internal text and elements are displayed vertically.

Nested elements, internal elements can be distorted in reverse with skew. The nested inner element must be block because transform cannot be applied to the inline element.

Twist 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);}

3. Diamond

Applying the nesting of elements, the outer and inner elements rotate each other by roate to realize octagonal shape.

The width of the inner element max-width is 100%, so that the whole picture can only be filled with the entire outer div.

The scale property controls the magnification of its image. By default, the center point is the magnification origin (Pythagorean theorem will be used, do not specify transform-origin).

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

Fourth, chamfering effect

Linear-gradient can be used to set angle, multi-value and gradient transparency to achieve.

You also need to pay attention to the setting of the background-size and background-repeat properties to prevent the background overlap from causing the effect not to take effect.

.wrap {width: 200px; height: 100px; background: # 58a; background: linear-gradient (- 135degje 0px 15px, # 58a 0px) top right, linear-gradient (135deg 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 chamfer and set the value of border-image-slice (picture frame offset inward)

Border-image uses svg to make pictures.

The border setting width + transparency, coupled with the inward offset of border-image-slice, creates a chamfered border.

Background-clip: 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,'); margin-top: 50px; width: 200px; height: 100px; background: # 58a; background-clip: padding-box;}

Other options

Leveraging the clip-path attribute, but not fully supported

Css4 will directly give the corner-path attribute to support chamfering

Fifth, trapezoidal pattern

Understand the basic principles of transform

An and d denote scaling and cannot control tilt for 0 position c and b; e and f control displacement

Translate (displacement): matrix (1, 0, 0, 0, 0, 1, 1, 1, and x).

Scale (Zoom): matrix (xrec 0pl 0jpg 0pl 0pl 0pl 0)

Skew (tilt): matrix (1). Since the input is deg (angle), the angle needs to be converted to an arc value.

Rotate (rotation): matrix (cosN,sinN,-sinN,cosN,0,0), converting angles to radians

The application of the above values is related to the value of transform-origin, which is the origin of the rotation of the positioning element, which can be top,bottom,center, etc., and three coordinate systems can be specified.

Perpective: perspective, cannot be negative, 0 or percentage, can only be numeric

Indicates the distance between the observer and the observed object

The farther the perspective distance from the object, the smaller the object will appear.

Perspective can only be set at the parent or ancestor level of the deformed element, because the browser produces perspective for the deformation of its children.

There is no skew attribute on 3D transformations.

6. Simple pie chart

Animated pie chart, the effect is as follows:

The implementation steps are as follows:

Draw a circle of yellowgreen, and use linear-gradient to set the value of background-image to achieve the function of displaying half of each of the two colors:

Then add a pseudo element, inherit the background color of the parent (real element), and then rotate it with rotate

To use margin-left to keep it to the left.

Using transform-origin to set its rotation anchor point

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%, # 6550) } .wrap:: before {content:'; display: block; margin-left: 50%; background-color: inherit; height: 100%; border-radius: 0% 100% 0 / 50%; transform-origin: left Animation:spin 3s linear infinite, bg 6s step-end infinite;} above are all the contents of this article entitled "sample Analysis of the shape of the Application of Css3 New Features". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.