css内容不规则显示之shape-outside与clip-path
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>
javascript2
已有之事将来必有,易行之事将来必行,太阳底下无新事
推荐阅读
Vue中如何使用debouce防抖函数
创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟 wait 毫秒后调用 func 方法。 debounced(防抖动)函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 opti...
太_2_真_人阅读 1k
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^<...
XboxYan赞 46阅读 3.2k评论 14
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库
XboxYan赞 35阅读 2.6k评论 2
CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...
XboxYan赞 30阅读 3.8k评论 2
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...
XboxYan赞 31阅读 2.5k评论 2
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...
i5ting赞 27阅读 2.2k评论 4
深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...
nero赞 31阅读 11.7k评论 3
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。