shape-outside
shape-outside的CSS 属性定义了一个能够是非矩形的形态，相邻的内联内容应围绕该形态进行包装。 默认状况下，内联内容突围其边距框;
shape-outside提供了一种自定义此包装的办法，能够将文本包装在简单对象四周而不是简略的框中。例如示例图片：

想要实现该款式，咱们就须要用到shape-outside，首先咱们发明一个简略的html构造：
<html><head>  <style>    body {      background: #e0f6ff;    }    .wrapper {      margin: 150px auto;      width: 500px;      height: 200px;      background: aquamarine;    }    .left,    .right {      width: 20%;      height: 100%;    }    .left {      float: left;      background: violet;    }    .right {      float: right;      background: coral;    }  </style></head><body>  <div class="wrapper">    <div class="left"></div>    <div class="right"></div>  </div></body></html>

以上页面显示为：

这时候咱们增加要显示的内容：

<body>  <div class="wrapper">    <div class="left"></div>    <p>      <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside">官网链接</a>      shape-outside的CSS 属性定义了一个能够是非矩形的形态，相邻的内联内容应围绕该形态进行包装。 默认状况下，内联内容突围其边距框;      shape-outside提供了一种自定义此包装的办法，能够将文本包装在简单对象四周而不是简略的框中。shape-outside      属性指定应用上面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形态。    </p>    <div class="right"></div>  </div></body>


发现，页面显示并不合乎咱们的预期，其实这是因为浮动造成的脱离文档规范流造成的。解决该问题咱们能够把p标签放到前面：

<body>  <div class="wrapper">    <div class="left"></div>    <div class="right"></div>    <p>      <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside">官网链接</a>      shape-outside的CSS 属性定义了一个能够是非矩形的形态，相邻的内联内容应围绕该形态进行包装。 默认状况下，内联内容突围其边距框;      shape-outside提供了一种自定义此包装的办法，能够将文本包装在简单对象四周而不是简略的框中。shape-outside      属性指定应用上面列表的值来定义浮动元素的浮动区域。这个浮动区域决定了行内内容（浮动元素）所包裹的形态。    </p>  </div></body>

后果如图，合乎咱们的预期：

为.leftdiv和.rightdiv，设置shape-outside，使相领的内联文字盘绕在咱们规定的形态四周。

.left {  background: violet;  shape-outside: polygon(100% 0, 0 100%, 0 0);  /* 配合浮动使之脱离规范文档流 */  float: left;}.right {  background: coral;  shape-outside: polygon(100% 0, 100% 100%, 0 100%);  /* 配合浮动使之脱离规范文档流 */  float: right;}

后果如下，能够看到文字曾经盘绕咱们设置形态了

然而这么看着，左右两边还是有点顺当，咱们想让左右两边也都是咱们设置的形态，这时候就须要用到clip-path了

clip-path
clip-path CSS属性应用裁剪形式创立元素的可显示区域。区域内的局部显示，区域外的暗藏。
这里咱们为父元素增加clip-path款式：
.wrapper {  margin: 150px auto;  width: 500px;  height: 200px;  background: aquamarine;  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);}

去掉左右两边div的背景色：

.left {  /* background: violet; */  shape-outside: polygon(100% 0, 0 100%, 0 0);  /* 配合浮动使之脱离规范文档流 */  float: left;}.right {  /* background: coral; */  shape-outside: polygon(100% 0, 100% 100%, 0 100%);  /* 配合浮动使之脱离规范文档流 */  float: right;}

成果如图：

残缺代码

<html><head>  <style>    body {      background: #e0f6ff;    }    .center {      text-align: center;    }    .wrapper {      margin: 150px auto;      width: 500px;      height: 200px;      background: aquamarine;      clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);    }    .left,    .right {      width: 20%;      height: 100%;    }    .left {      /* background: violet; */      shape-outside: polygon(100% 0, 0 100%, 0 0);      /* 配合浮动使之脱离规范文档流 */      float: left;    }    .right {      /* background: slateblue; */      shape-outside: polygon(100% 0, 100% 100%, 0 100%);      /* shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 100% 50%); */      /* 配合浮动使之脱离规范文档流 */      float: right;    }  </style></head><body>  <div class="wrapper">    <div class="left"></div>    <div class="right"></div>    <!-- 文字需放在最初 -->    <p>      <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside">官网链接</a>      shape-outside的CSS 属性定义了一个能够是非矩形的形态，相邻的内联内容应围绕该形态进行包装。 默认状况下，内联内容突围其边距框;shape-outside提供了一种自定义此包装的办法，能够将文本包装在简单对象四周而不是简略的框中。    </p>  </div></body></html>
也能够为clip-path增加动画成果


残缺代码：

<html><head>  <style>    body {      background: #e0f6ff;    }    .box {      margin: 100px auto;      width: 300px;      height: 300px;      background: coral;      clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);      animation: 4s trans infinite alternate ease-in-out;      transform-origin: center;    }    @keyframes trans {      from {        clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);      }      to {        clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);      }    }  </style></head><body>  <div class="box"></div></body></html>