The shape-outside attribute of CSS allows web page text to be arranged around non-rectangular graphics. 1. The basic usage is to use shape functions such as circle(), ellipse(), inset() or polygon() in combination with float; 2. You can use the transparent channel of PNG pictures to define shape boundaries, and you need to use clip-path to ensure visual consistency; 3. Polygon() supports custom polygon coordinates to achieve flexible layout; 4. Notes include only the effect on float elements, browser compatibility and performance. Mastering these key points can achieve interesting mixed graphics and text effects.

Sometimes we want the text on the web page to be arranged around some non-rectangular graphics, such as circles, ellipses and even custom polygons. CSS provides a very practical property: shape-outside , which can help us achieve this effect. The key is understanding how to use it to control the shape boundaries of text streams.

Basic usage: Start with a simple shape

The most common usage of shape-outside is to use it in conjunction with float attribute. It accepts a shape function, such as circle() , ellipse() , inset() or polygon() , which determine the specific path surrounding the text.

For example:

 .shape {
  float: left;
  shape-outside: circle(50%);
}

This code will allow the text to flow around the outside of a circular area. Note that this element itself will still occupy a rectangular space, but the text stream will be adjusted according to the shape you set.

Common settings include:

• circle(50%) : A circle with the center of the element as the center and a radius of 50%.
• ellipse() : Oval shape.
• inset(top right bottom left) : Inline rectangle, can have rounded corners.
• polygon() : supports multiple coordinate points, suitable for creating irregular shapes.

Use pictures as shape boundaries

In addition to defining shapes through CSS functions, you can also directly use the transparent channels of the picture to generate shape outlines. This is especially useful when you want text to revolve around a PNG image (like a hand-painted character).

The syntax is as follows:

 .shape {
  float: left;
  shape-outside: url('image.png');
  clip-path: url('image.png');
}

The key here is that the image must be of the same origin as the current page, otherwise the browser will not load its alpha channel due to security restrictions. In addition, in order to make the visual effect consistent with the shape, the element itself is usually cropped with clip-path to make its appearance consistent with the shape boundary.

A few points to note:

• The image format is preferably PNG and has clear transparent edges.
• Moderate size to avoid affecting performance.
• Not recommended for complex or high-precision images, as shape extraction may be distorted.

Custom polygon shapes: more flexible layouts

polygon() is the most powerful choice when you need to have more freedom to control the path through which text flows. You can define any shape by a set of coordinate points.

Example:

 .shape {
  float: left;
  shape-outside: polygon(0 0, 100% 0, 50% 100%);
}

The example above draws a triangle, and the text will walk around this triangle. The coordinate system takes the upper left corner of the element as the origin (0, 0), and grows to the right and downwards.

In practical applications, visual tools such as Clippy or CSS Shapes Editor can be used to assist in the generation of polygon coordinates, which is more efficient and more intuitive.

Notes and compatibility

Although shape-outside is very powerful, there are some things to pay attention to in actual use:

• It only works on elements with float set and cannot be used for floating simulations in flex or grid layouts.
• In terms of browser support, mainstream modern browsers (Chrome, Edge, Firefox) are all supported, and Safari supports them well, but there may be problems in older versions.
• If the shape is too complex, it may affect the page rendering performance, especially when using a large number of polygons or large images.

Also, if you find that the text is not arranged as expected, check if the float setting is missing, or the element size is too small to make the shape not display correctly.

Basically that's it. After mastering these key points, you can start trying to create some interesting mixed pictures and text effects.

The above is the detailed content of Wrapping Text Around Custom Shapes Using CSS shape-outside. For more information, please follow other related articles on the PHP Chinese website!