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>
后果如图,合乎咱们的预期:
为.left
div 和.right
div,设置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>