A study of geometry shape in CSS3

Objective

It is estimated that everyone will use CSS shapes in their daily work, but the most commonly used estimation in celestial circles is the Circle (circle), ellipse (ellipse), and various triangular shapes, but you rarely see the use of geometry or multilateral graphics. If you do not understand what is called geometry, then please go to Baidu Encyclopedia, even if we use :after :before these pseudo-elements to construct the shape we need or use the border to curve the salvation, but for the code is too long, there is no direct definition of geometry or polygon properties. For today.shape

Summary

About shape the application, personal feeling a little strange, why so to say, because can only be applied to the float value, if not a floating element, then sorry, not applicable. So personally feel that the general use this shape to construct a shape of our work, it should be with a floating image, like Impressivewebs, the left side of the image to the right of the text is particularly suitable for

However, it can only be applied to elements with a floating property to use this shape property, presumably compatibility should also not really, through the caniuse can see this property compatibility in each browser, even the mobile side of the compatibility miserable, I saw no green red floating.

Study or want, maybe one day need it?

Since this is for the element with the float attribute, it is time to say the floating element

Floating Behavior and Box models

For floating, presumably everyone in this line, as long as the design manuscript has obvious about the design, then very much like to use float floating properties, floating have good also have insufficient, floating can easily internship various left and right layout, but also will cause collapse. But this is not a floating bug, but a normal behavior, because the outer parcel warp does not have enough to exactly wrap the entire floating area (float areas), if the floating area (slice) has a fixed dimension, and the element containing the picture with the floating property does not specify a height, or its content is not higher than the dimensions of the image itself, it will form a collapse, for how to clear the floating caused by the collapse, may wish to look back to a previous blog post: use: After Pseudo-class elements to clear the collapse caused by floating float, Or you might as well have a look at Brother Xin wrote a long time ago a blog dedicated to float properties, presumably you will have a different understanding of the float.

In general, our normal floating area is in the form of a rectangular box, such as the picture of the red box is its floating area, then the dimension of the floating area is a rectangular box, the text is around the rectangle, for the element with a float to specify a shape attribute, then maybe it will become this

The text does not have to be neatly lined up and can be surrounded by a round head, which is the shape property that wraps the text around the image.

So, shape is actually to reduce the floating area, rather than increase the floating area, this is to make it clear, because only to reduce the floating area, those in the rectangular box text can come in, clothes are off, you let us stand in front of the door guarded?

Supported Basic Shapes

The current specification supports shape-outside attributes, but no attributes are specified shape-inside , and future versions may have internal shapes or not necessarily. If you want to specify one shape-outside then you also specify the width of this floating region (float area). So the syntax for regular CSS is as follows:

. Left {      shape-outside:shape function;      Float:left;      width:100px;      height:100px;    }

Shape now supports 4 function-defined shapes

Inset () = inset ({1,4} [round]?)//Concave circle () = Circle ([]? [at]? )//round ellipse () = Ellipse ([{2}]? [at]? )  //oval polygon () = Polygon ([,]? []#)//Polygon

which
Shape-arg =<length> | <percentage>;
<shape-radius> = <length> | <percentage> | Closest-side | Farthest-side
Position = Top,right,bottom,left

In fact, it is the length of the value, whether it is shape-arg or shape-radius , but we usually write the CSS value is not the same place is more at or round.

Inset () function

A concave shape can be defined in the inset () function so that the text surrounds the concave body.
The Shape-arg function is the length value, which can be px或者percentage . Allow 1~4 values, respectively, is the shorthand value of top,right,bottom,left, for the introduction of inset we can use the following figure to explain

CSS in many of the value of the property if you use a shorthand value, then all in accordance with such a sort, for shorthand still do not understand, please refer to a small article written before: margin shorthand value

So if the definition of a inset concave is 10px from the top, the right side is 20px, the bottom is 10%, the distance to the left is 0, the CSS is written as follows

. Inset{float:left;width:100px;height:100px;background-color: #FF0; Shape-outside:inset (10px 20px 10% 0);}

The effect is as follows:

The dark green area is the value of the floating zone (float area), and the yellow area is the current floating area.

Round, optional value, surround meaning. Followed by border-radius our familiar rounded properties, can be defined in the concave shape of the four corners of the degree of smoothness, but also has a 1~4 value, respectively, the upper left corner, the upper right corner, the lower right corner, the lower left corner. If you do not understand the situation can look at the previous written: Border-radius attribute value in detail, so in just that concave body want to define an ellipse radius value of 20px and 50px, then you can write as follows

. Inset{float:left;width:100px;height:100px;background-color: #FF0; Shape-outside:inset (10px 20px 10% 0 round 20px 50px );}

The effect is as follows:

The dark green area is the value of the floating zone (float area), and the yellow area is the current floating area. The floating area is made up of a distance from the top 10px, the right 20px, the bottom 10%, the left 0 of the rectangular box in the upper left corner and the lower right corner of the arc is 20px, the upper right corner and the lower left corner of the arc is 50px ellipse.

Circle () and Ellipse () functions

The values for the above two circular shape functions and the Ellipse function are all the same, so it is better to simply merge them together. Their values are: []? [at]?, the ellipse is a little bit different, said the following.

Shape-radius optional Value, which represents the radius scale, only one value for the circle defines the radius of the circle, but the ellipse can define two values, one is the x-axis radius, and the other is the y-axis radius, but no negative values are allowed for the circle or ellipse radius value. Use percentages will be calculated from the reference box, you can also use common length values as units, want a radius of 50px circle, then directly write directly circle(50px) , of course, can also be used closest-side or farthest-side to define, For length values (lengths) or percentages (percentage) We all understand that the value in the inside is the radius of the specified circle. But for closest-side or farthest-side just a little bit more complicated.
closest-sideThe shortest distance from the center to the edge is the radius, and the value is equal for the circle, the shortest edge for the ellipse. such as the oval red is the radius.
farthest-sideThe longest distance from the center to the edge is the radius, and the values are equal for the circle, the longest edge for the ellipse. such as the oval blue is the radius.

At an optional value that defines the center position of the circle or ellipse. If so shape-outside: circle(20px at 50px 30px) , the radius of the circle is 20px, the center distance is 50px from the left, and the point is 30px from the top.

The effect is as follows:

Zoom in After 300%

If shape-outside: circle(closest-side at 50px 40px) so the center of the position should be distance from the top 40px, 50px on the left, just above also mentioned about Closest-side radius is to the shortest edge of the reference frame distance, then the shortest distance should be 40px, instead of 50px, So the radius of this circle should be shown for 40px:

Polygon () Polygon function

An optional value that fills the rule. This rule defines the shape of the shapes inside the shape, please refer here: Fill-rule

, this is the value of the set polygon, at least three values, so it must be so written polygon(40% 0, 100% 0,50% 50%) , of course you can also use other values, not necessarily a percentage. The first value in parentheses is a horizontal displacement, the second value is a vertical displacement, and can be repeated n times. If we want to construct an equilateral Pentagon within the 100*100 rectangle, as

The coordinates of the corresponding a,b,c,d,e points should be as follows

Therefore, the corresponding CSS should be written

. Polygon{float:left;width:100px;height:100px;background-color: #000; Shape-outside:polygon (50px 0,100px 37px,82px 100PX,19PX 100px,0 37px);}

Of course, it is possible to construct a rectangular box, but if you want to be more like the Pentagon, then you need to add clip-path , this clipping property, this is actually a bit like the image Polygon hotspot tool, the idea is to put the image of a part of the need to key out, then the complete code is as follows

. Polygon{float:left;width:100px;height:100px;background-color: #000; Shape-outside:polygon (50px 0,100px 37px,82px 100PX,19PX 100px,0 37px);-webkit-clip-path:polygon (50px 0,100px 37px,82px 100px,19px 100px,0 37px);}

Please use Google Chrome to open the right demo→:css equilateral Pentagon

The effect is as follows:

Something

Shape properties in CSS3 are also related to Box-sizing,margin-box,padding-box,borde-box, compared with the most most fundamental of all CSS is the box model, shape is based on the box model evolved, In order to adapt to the needs of the times, it is no longer possible to 100 years are rectangular, square or round. Of course, the Web can also define the shape of the image shapes, these do not go to say, personally think that if you can later this property is compatible with the browser, then we can see the avatar may be Pentagon, hexagonal or n-side shape and is very possible, is not confined to the regular shapes we see today. Of course, the text revolves around a polygon image and is ideal for use in the typography of the fashion week.

Well, it's more exciting to study.

Yes, attach a foreign sister paper write an article CSS Shapes 101

Resources:
http://dev.w3.org/csswg/css-shapes/
Https://developer.mozilla.org/en-US/docs/Web/CSS/shape

Reprint Source: http://xiaoho.com/?p=881

A study of geometry shape in CSS3