Create irregular graphics using CSS 3_html/css_WEB-ITnose

Preface

CSS technology for creating complex graphics will soon be widely supported and applied to actual projects. The purpose of this article is to open the tip of the iceberg for everyone. I hope this article gave you a preliminary understanding of irregular shapes.

Now, we can use CSS 3 common irregular and complex graphics (click the link to view), as shown below:

Graphics created using CSS cannot Built-in text or text wrapping effect. Therefore, how to realize complex layouts of irregular graphics and text has become a hot topic.

Today we will introduce how to achieve this effect. In this article, we will explain how to use CSS to create irregular graphics and achieve irregular text layout. After learning how to create irregular graphics, you can use your imagination to create beautiful CSS pages. The following picture is the rendering of "Alice in Wonderland" created using this technology:

Note: This is the latest technology of CSS, so it requires a higher browser version. If you want to see the online examples you need to make sure your browser supports this CSS technology. In this article I will also provide some screenshots to see the effect.

Declaring graphics

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

Shape-* values ​​have three assignment methods: automatic, basic shape or image link. If set to automatic, floated elements will continue to render as the traditional box model. 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, etc. You can view the detailed description via the link.

If the attribute is set to an image link, the browser will draw the graphic shape according to the "alpha channel" of the image.

Creating the coordinate system on the element

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

The coordinate system is very necessary because graphics need to be drawn based on the lattice on this coordinate system. The shape-* attribute is based on the box model. In order to make it work, you need to explicitly specify the size of the box and limit the irregular shapes to the box. It will also be used to create the drawing coordinate system. The starting point of the coordinate system is located in the shape box. upper left corner. Without explicit width and height declarations, the shape-* attributes will have no effect.

Set the background color of the custom graphic

After the custom graphic is applied, its box model still exists, and other traditional style settings will apply to the box model scope. For example, in the following example,

we just want to create a floating circle and set the background color of the circle. According to the normal thinking, the effect should be like this:

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

In the picture above we see that the background color is applied to the box model range, rather than within the circle as 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. In the example below you will see how it is used.

Reminder

Now, the shape-outside attribute only scopes floated elements, and is restricted to block-level elements only. The text around elements defined using these properties will be arranged based on the graphic shape. In the future, CSS shapes will not only be limited to floating elements. We will not only be able to make fuss about graphics outside the text, but also define custom graphics inside them to achieve the following effects:

Example - Use shape-outside to create floating text wrapped around a custom shape

We start with a simple example. In the example, we will create a custom graphic with built-in text flow. The final rendering is as follows (the example download link is provided at the end of the article):

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

<div class="container">  <div class="shaped"></div>  <div class="content">    <h1><span>La</span> Tour <br/>Eiffel</h1>    <p>Lorem Ipsum.....</p>  </div></div>

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

.container{  overflow:hidden;  height: 100vh;  width: 100vw;}.shaped{  float:left;  height:100vh;  width:40vw;  float:right;  background: black url（../images/eiffel.jpg） center top no-repeat;  background-size:cover;}

Now that the coordinate system has been created successfully, we will draw graphics next. Graphs can be drawn in two ways:

Using polygon()

We can use the polygon() method to calculate the graph range. This method obtains multiple points from the coordinate system for drawing graphics, each point is located by (x, y) value. In the example we are going to create a very simple polygon, as shown below:

The unit of the coordinate point can be a fixed value or a percentage. In this example we will set the dot position as a percentage. Next we need to apply this style to the floating element.

.shaped{/*…*/  shape-outside: polygon（0 0, 100% 0, 100% 100%,30% 100%）;  shape-margin: 20px;}

 

应用以上的样式后，一个不规则的图形-梯形产生了。

可以看到代码中使用了shape-margin 属性，它用于设置图形和文本内容之间的边距。

接下来需要添加背景图，需要注意在添加背景图之后，它将被应用于盒模型，目前为止效果如下：

所以，为了达到预期效果，我们需要设置clip-path 属性，并且设置其范围和shape-outside 属性相同。

.shaped{/*…*/  clip-path: polygon（0 0, 100% 0, 100% 100%,30% 100%）;}

 

现在，我们就通过polygon() 方法实现了目标效果。

 

使用图片链接

我们也可以通过图片（严格说是拥有通明区域的图片）来创建不规则图形，依据图片的“alpha通道” 生成不规则图形。

例如，替代polygon() 声明方法。我们可以设置shape-outside 属性值为图片URI，浏览器就会自动依据图片来绘制不规则图形。

图片中的透明部分将被声明为文本元素的浮动部分。其余部分被声明为不规则图形。代码如下：

.shaped{/*…*/  shape-outside: url（/images/mm.png）;  shape-image-threshold: 0.5;这个属性用于设置浮动区域透明度范围}

 

上述的两种方法都拥有各自的优缺点。例如，如果图形过于复杂，通过图片方法比手动计算图形绘制节点更方便。

 

源码下载