CSS3 Shape---Use shapes to change the layout of adjacent content

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