1. Shape

The appearance of Shape broke the embarrassment of traditional CSS that only rectangular shapes were used to diversify our shapes.

Use the following structure and style as the base case description:

<div class="txtBox">
   <div class="txtBox_content">
       <p>
           小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
       </p>
       <p>
           “小说”出自《庄子·外物》。
       </p>
       <p>
           人物、情节、环境是小说的三要素。情节一般包括开端、发展、高潮、结局四部分，有的包括序幕、尾声。环境包括自然环境和社会环境。 小说按照篇幅及容量可分为长篇、中篇、短篇和微型小说（小小说）。按照表现的内容可分为神话、仙侠、武侠、科幻、悬疑、古传、当代、爱情、家庭伦理篇、浪漫青春、游戏竞技等。按照体制可分为章回体小说、日记体小说、书信体小说、自传体小说。按照语言形式可分为文言小说和白话小说。
       </p>
       <p>
           “小说”一词最早出现于《庄子·外物》：「饰小说以干县令，其于大达亦远矣。」庄子所谓的「小说」，是指琐碎的言论，与小说观念相差甚远。直至东汉桓谭《新论》：「小说家合残丛小语，近取譬喻，以作短书，治身理家，有可观之辞。」班固《汉书．艺文志》将「小说家」列为十家之后，其下的定义为：「小说家者流，盖出于稗官，街谈巷语，道听途说者之所造也。」才稍与小说的意义相近。而中国小说最大的特色，便自宋代开始具有文言小说与白话小说两种不同的小说系统。文言小说起源于先秦的街谈巷语，是一种小知小道的纪录。
       </p>
   </div>
</div>

*{  margin: 0; padding: 0;}
.txtBox{
    width: 600px;
    height: 600px;
    background: #eee;
    margin-right: auto;
    margin-left: auto;
}
.txtBox_content{
    width: 600px;
    height: 600px;
    background: #999;
}

1. Shape value

Many references call it <basic-shape>, I prefer to call it the shape of value , because it is the definition of a shape , it can be used as an attribute value clip-pathor shape-outsideon the property.

The possible data are:

（1）inset()

inset()The function specifies a rectangular area inside the shape . Its parameters are 4 offset values and optional round angles.

 inset( <shape-arg>{1,4} [round <border-radius>]? )

The following is the correct way to write inset():

inset(10% 20% round 5px) 
/*一个带5像素圆角的矩形，上下2条边向内10%，左右2条边向内20%*/
inset(15px 20px 30px)  /* 上边距   左右边距  下边距 */
inset(25% round 10px 30px) 
inset(10px 20px 30px 40px round 10px)

such as:

.txtBox_content{
    clip-path: inset(10% 20% 10% round 10%);
}

（2）circle()

circle()The function is used to define a circle .

circle() = circle( [<shape-radius>]? [at <position>]? )
/* where.. */
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

<shape-radius>The parameter is used to specify the radius of the circle . The radius can also be specified using two keywords: closest-sideand furthest-side.

<position>The parameter is used to specify the center of the circle , the default is the exact center.

If no parameter is specified, yes closest-side, and the exact center is defaulted.

The following is the correct way to write circle():

circle(); 
/* 使用默认值：圆形使用closest-side作为半径，圆形位于元素的中心 */
 
circle(100px at 30% 50%); 
/* 圆形的半径为100像素，位于元素的水平30%，垂直50%的位置 */
 
circle(farthest-side at 25% 25%); 
/* 圆形的半径为最远边的一半，位于元素的水平25%，垂直25%的地方 */
 
circle(10em at 500px 300px);

such as:

.txtBox_content{
    clip-path: circle();
}

（3）ellipse()

ellipse()The function is used to define an ellipse .

ellipse() = ellipse( [<shape-radius>{2}]? [at <position>]? )
/* 其中... */
<shape-radius> = <length> | <percentage> | closest-side | farthest-side

Its parameters are the same as the circle() function.

<shape-radius>The parameter is used to specify the radius of the ellipse. It can specify 2 radius values: rx and ry, which represent the X-axis radius and Y-axis radius of the ellipse, respectively.

The following is the correct way of writing ellipse():

ellipse() 
/* 使用默认值 */
 
ellipse(100px 50px at 30% 50%) 
/* 椭圆形的X轴半径100像素，Y轴半径50像素。圆心位于水平30%，垂直50%的地方 */
 
ellipse(farthest-side closest-side at 25% 25%) 
/* 椭圆形的X轴半径为farthest-side，Y轴半径为closest-side。圆心位于水平25%，垂直25%的地方 */
 
ellipse(10em 10em at 500px 300px) 
/* 椭圆形的X轴半径和Y轴半径都为10em。圆心位于水平500像素，垂直300像素的地方 */

such as:

.txtBox_content{
    clip-path: ellipse(50% 20%);
}

（4）polygon()

polygon()The function is used to define a polygon .

polygon() = polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
/* 其中.. */
<shape-arg> = <length> | <percentage>

polygon()The parameter of is a set of coordinate pairs ( <shape-arg> <shape-arg>), and each coordinate pair represents a vertex coordinate of the polygon. The browser will connect the last vertex and the first vertex to get a closed polygon. Coordinate pairs are separated by commas, and absolute unit or percentage unit values can be used.

In addition to the coordinate pair parameters, the polygon()function can also use an optional keyword fill-rule. This keyword specifies how to deal with areas of polygonal shapes that may intersect. The possible values are nonzerosum evenodd. The default value is nonzero.

The following are all valid polygon()function declarations.

polygon(0 0, 100% 100%, 0 100%)
polygon(0 0, 100% 100%, 0 100%)
polygon(50px 0px, 100px 100px, 0px 100px)
polygon(evenodd, 446.33px 452.00px, 443.63px 246.82px, 389.92px 245.63px )

such as:

.txtBox_content{
    clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);
}

2. Shape application: clip-path

clip-path , clipping attribute, used to specify a shape value , inline or external SVG path as the clipping path to clip the element.

The content in the cropped area will be displayed, but the content not in this area will not be displayed.

The cropped element can be any container and picture element.

/* SVG中的clipPath的使用 */ 
.element { 
    clip-path: url(#svgClipPathID); 
} 
/* 使用CSS中的基本图形函数 */ 
.element { 
    clip-path: polygon(...); 
}
/* 或者其他的图形函数 */

The basic shape clip-pathof use to see the front of the case.

Here is an example to illustrate the use of SVG.

<svg height="0" width="0">
    <defs>
        <clipPath id="svgTextPath">
            <text x="0" y="300" textLength="600px" lengthAdjust="spacing" font-family="Vollkorn" font-size="100px" font-weight="700" font-style="italic">
                White Mouse
            </text>
        </clipPath>
    </defs>
</svg>

.txtBox_content{
    clip-path: url(#svgTextPath);
}

3. Shape application: shape-outside

shape-outside uses shape values to define the floating area of floating elements . This floating area determines the shape of the content (floating element) in the line. This will cause the inline content to wrap around the shape instead of surrounding a rectangle.

Non-floating elements cannot be used.

Possible values:

/* 关键字值 */
shape-outside: none;   /* 默认 */
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

/* 形状值 */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

/* <url> 值 */
shape-outside: url(image.png);

/* 渐变值 */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

/* 全局值 */
shape-outside: initial;
shape-outside: inherit;
shape-outside: unset;

Two, classic application 1: text circle surround

Sometimes, you need to make text wrap around pictures.

This is a common graphic typesetting technique. Floating is commonly used in CSS to achieve this effect.

<div class="box">
    <div class="img">
        <img src="images/4.jpg" width="300" height="300" alt="">
    </div>
    <div class="txt">
        <p>
            小说是以刻画人物形象为中心，通过完整的故事情节和环境描写来反映社会生活的文学体裁。
        </p>
        <p>
            “小说”出自《庄子·外物》。
        </p>
        <p>
            人物、情节、环境是小说的三要素。情节一般包括开端、发展、....
        </p>
        <p>
            “小说”一词最早出现于《庄子·外物》：「饰小说以干县令，其于大达亦远矣。」....
        </p>
    </div>
    <div class="clears"></div>
</div>

*{
    margin: 0; padding: 0;
}

.clears{
    clear: both; height: 0;  overflow: hidden;  line-height: 0; font-size: 0;
}
.box{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    background: #f2f2f2;
}
.img{
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.txt{
    font-size: 16px;
    line-height: 2;
}

Let the picture part float to achieve text wrapping.

.img{
    float: left;
    margin:30px;
}

But if you turn the picture part into a circle, the text still surrounds the "rectangle".

.img{
    float: left;
    margin:30px;
    border-radius: 100%;
}

To achieve "circular" wrapping , you need to use the new property shape-outside of CSS3 , which specifies the shape of the text wrapping.

.img{
    float: left;
    margin:30px;
    border-radius: 100%;
    shape-outside:circle();  /* 圆形环绕 */
}

3. Classic application 2: Surround in any shape

In the same way, we can create text wrapping effects of any shape.

<div class="txtBox">
    <div class="img">
        <img src="images/fashion.jpg" alt="">
    </div>
    <div class="txt">
        <p>
            耀眼的金属光泽，独具匠心的外观设计，令宝诗龙的每一处都散发着不拘一格的时尚气息。
        </p>
        <p>
            个性十足的林彦俊也对宝诗龙的饰品青眼有加，在七夕时分亲自演绎了宝诗龙的不凡魅力。

        </p>
        <p>
            毫无疑问的，当它的光芒闪耀于脖颈和指间，你便是人群中当仁不让的视觉焦点。
        </p>
        <p>浪漫而性感 Giambattista Valli让繁花盛开</p>
        <p>简单优雅 Stella McCartney打造都市独立女性</p>
        <p>2019秋冬巴黎周回顾 潮流Key Word尽在我手</p>
        <p>都市摩登女郎style LV用各种元素混搭</p>
        <p>那些老佛爷给我们做的包包你有几个？</p>
        <p>浪漫而性感 Giambattista Valli让繁花盛开</p>
        <p>简单优雅 Stella McCartney打造都市独立女性</p>
        <p>2019秋冬巴黎周回顾 潮流Key Word尽在我手</p>
        <p>都市摩登女郎style LV用各种元素混搭</p>
        <p>那些老佛爷给我们做的包包你有几个？</p>
    </div>
   <div class="clears"></div>
</div>

*{
    margin: 0; padding: 0;
}

.clears{
    clear: both; height: 0;  overflow: hidden;  line-height: 0; font-size: 0;
}

.txtBox{
    margin-top: 50px;
}


.txtBox{
    width: 1000px;
    height: 687px;
    background: #bda895;
    margin-right: auto;
    margin-left: auto;
}
.img{
    float: left;
    shape-outside: polygon(0 0,368px 0, 425px 226px, 463px 227px ,475px 355px,
    558px  503px ,391px  596px,  440px 687px, 0  687px);
}
.txt{
    color: #fff;
    font-size: 20px;
    line-height: 2;
    padding-top: 30px;
    padding-right: 30px;
}