网站设计中会用到的使用css来制作锯齿状分割线

与标准水平分隔相比,使用SVG形状分隔两个不同的块以创建更有趣的视觉外观。

<div class="shape-separator"></div>

.shape-separator {
position: relative;
height: 48px;
}
.shape-separator::after {
content: '';
background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxLjQxNCI+PHBhdGggZD0iTTEyIDEybDEyIDEySDBsMTItMTJ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
position: absolute;
width: 100%;
height: 24px;
bottom: 0;
}

 

网站设计中会用到的使用css来制作锯齿状分割线

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/261096.html

(0)
上一篇 2022年5月24日
下一篇 2022年5月24日

相关推荐

发表回复

登录后才能评论