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

This article will explain in detail how to set irregular graphics in html. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Declare the graphic

We need to declare irregular graphics using the shape-outside attribute. Currently, shape-outside attributes can only be applied to floating elements and can only be applied to block-level elements. If you need to use these attributes on non-block-level elements, you must first declare the element as block-level.

There are three ways to assign Shape-* values: automatic, basic graphics or picture links. If set to automatic, floating elements continue to render as traditional box models. If you are not familiar with the box model, please refer to the CSS box model, which is the basis for reading this article.

Drawing methods include: rectangle, inset-rectangle, circle, ellipse or polygon methods. You can view the detailed description through the link.

If the property is set to the picture link, the browser will draw the graphic shape according to the "alpha channel" of the picture.

Create a coordinate system on an element

After declaring the CSS drawing, we first need to create the coordinate system that will be used to draw the drawing.

The coordinate system is necessary because the graph needs to be drawn according to the lattice on this coordinate system. The shape-* attribute is based on the box model, and in order to make it work, you need to specify the size of the box and limit the irregular graphics to the box. It will also be used to create the drawing coordinate system, which starts at the upper left corner of the box. If there is no explicit width and height declaration, the shape-* property will have no effect.

Set the background color of a custom graphic

With the application of custom graphics, its box model still exists, and other traditional style settings will affect the scope of the box model. For example, in the following example

We just want to create a floating circle and set the background color of the circle. According to a normal understanding, the effect should be as follows:

But when you set the background color of the box, you will find that the effect is different from that expected, and the effect is as follows:

In the image above, we see that the background color is applied to the range of the box model, rather than in the circle we expected.

So, how should we set the background color of the circle? This leads to a new CSS style: clip-path. Clip-path is used to limit the scope of the current style. You will see how to use it in the following example.

A reminder

For now, the shape-outside attribute only scopes floating elements and is limited to block-level elements. For elements defined with these attributes, the text around them will depend on the layout of the graphic shape. Future CSS shapes will not only be limited and applied to floating elements, we will not only be able to work on graphics outside the text, but also define custom graphics inside them to achieve the following effects:

Example-use shape-outside to create floating text around a custom shape

Let's start with a simple example. In the example, we will create a custom graphic with a built-in text stream, and the final effect is as follows (the example download link is provided at the end of the article):

In the example, we have two containers for setting custom shapes and nested text content. The code is as follows:

CSS Code copies content to the clipboard

Lorem?Ipsum...

First we need to declare the DIV node of the floating area and set the size with a fixed value. The code is as follows:

CSS Code copies content to the clipboard

. Container {

Overflow:hidden

Height:?100vh

Width:?100vw

}

. Shaped {

Float:left

Height:100vh

Width:40vw

Float:rightright

Background:blackurl (

Background-size:cover

}

Now that the coordinate system has been created successfully, we are going to draw the graph. You can draw graphics in two ways:

Use polygon ()

We can use the polygon () method to calculate the extents of the graph. This method gets multiple points from the coordinate system for drawing, and each point is located by a (x, y) value. In the example, we are going to create a very simple polygon, as shown in the following figure:

The units of coordinate points can be fixed values, or percentages. In this example, we will set the lattice position as a percentage. Next we need to apply this style to the floating element.

CSS Code copies content to the clipboard

. Shaped {

Shape-outside:?polygon (100% 100% 100% 100% 100% 30% 100%)

Shape-margin:20px

}

After applying the above style, an irregular figure-trapezoid is produced.

You can see that the shape-margin property is used in the code to set the margin between the graphic and the text content.

Next, you need to add a background image. Note that after adding a background image, it will be applied to the box model. So far, the effect is as follows:

So, to achieve the desired effect, we need to set the clip-path property and set its scope to be the same as the shape-outside property.

On "how to set irregular graphics in html" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.