Note
The functionality implemented in this article is not good for browser support, except that most of the rest of the browser is not supported, although it can be resolved using Polyfill, but it is not very well supported and sometimes error
Polyfill How to use
Download the Polyfill, put it into the project, and then reference it:<script src= ' js/shapes-polyfill.js ' ></script>. For specific use, refer to GitHub
Use
This article mainly describes the use of shape shapes to change the layout of the next content, where the content is mainly refers to text.
Describes the use of collection graphics in CSS, and for Level 1 (candidate criteria), you can use shape properties to change the content flow layout next to a shape.
Property Shape-outside
Use shapes to change the layout flow of the content next to it, where the content refers to text.
Grammar
shape-outside:none| [<basic-shape>| | <shape-box>]|<image>
Use shapes to change the layout flow of content next to the default value of None
<basic-shape>: Drawing Basic shapes using the Basic Shapes function
<shape-box>: Using box model to get shape
<image>: Getting a shape from an external image
Note: Applies only to float elements
Shape-inside
Use collisions to change the layout flow of internal content (syntax is not recommended for temporary instability)
Shape-margin
The distance between the shape and the next content
Shape-image-threshold
Applies to getting a shape from an external image, setting a threshold value. This is where you set the text overlay to the picture. Such as
Under normal circumstances, the following is displayed
Setting the Shape-image-threshold to 10 shows the following
Draw a basic shape to draw a rectangle
Grammar
Inset () =inset (<SHAPE-ARG>{1,4}[ROUND<BORDER-RADIUS>]?)
- Inset can accept 1-4 parameters, similar to the designation of a margin four value (upper right bottom left).
- Border-radius is an optional parameter that defines the rounded corners of the rectangle
Draw a Circle
Grammar
Circle () = Circle ([<shape-radius>]? [at <position>]? )
- The default is a circle centered at the center of the element
- The Shape-radius is an optional parameter that represents the radius of the circle. Can be a number, a percentage, not a negative number, or a closest-side (near-end), farthest-side (remote) two keywords.
- Position as an optional parameter that represents the center position
Draw Ellipse
Grammar
Ellipse () = Ellipse ([<shape-radius>{2}]? [at <position>]? )
- The default is a circle centered around the center of the element.
- The Shape-radius is an optional parameter, and two values represent the x-axis and y-axis radius, respectively. Can be a number, a percentage, not a negative number, or a closest-side (near-end), farthest-side (remote) two keywords.
- Position as an optional parameter that represents the center position
Drawing polygons
Grammar
Polygon () = Polygon ([<fill-rule>,]? [<shape-arg> <shape-arg>]#)
- Fill-rule is an optional parameter that represents the fill rule for polygons. You can accept nonzero, evenodd as parameters.
- Shape-arg represents polygon vertex coordinates, each pair represents a point and requires at least three points
Drawing polygons can be visualized manually using the chrome (google) browser CSS Shapes Editor for Chrome plugin. You can see the developer tools (Ctrl+shift+i) in the Chrome browser
Using box model to get shape
Grammar
<shape-box> = Border-box | Padding-box | Content-box | Margin-box
Box model is actually set by CSS box style, mainly to set the border
Example
border:10px solid #000;border-radius:50%;margin:20px;<!--use Margin-box, the above settings, margin will have a role-->shape-outside: margin-box;<!--Use Padding-box, the above settings, margin will not be useful-->shape-outside:padding-box;
Get a shape from an external image
Grammar
Shape-outside:url ("");
- URL is a picture path
- Using an external image to get the shape requires the image to have an alpha channel.
- Pixels in the image that have alpha exceeding the threshold will be used to define the shape.
- The threshold value is specified by the Shape-image-threshold property, and the default value is 0
Because the demo design to multiple files, here to provide demo source download
CSS3 Shape---Use shapes to change the layout of adjacent content