共计 3393 个字符，预计需要花费 9 分钟才能阅读完成。
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-pathCSS 属性应用裁剪形式创立元素的可显示区域。区域内的局部显示，区域外的暗藏。
这里咱们为父元素增加 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>
正文完
