css之分割线特效

最新推荐文章于 2022-08-30 07:01:09 发布

embelfe_segge

最新推荐文章于 2022-08-30 07:01:09 发布

阅读量249

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： css css3 html 后端 java

本文链接：https://blog.csdn.net/embelfe_segge/article/details/124812092

版权

本文介绍了使用CSS实现的各种独特分割线效果，包括斜线、锯齿线、半圆、波浪线、弯曲线和三角形分割线。通过示例代码展示了如何利用CSS Grid创建这些视觉分隔元素。

摘要由CSDN通过智能技术生成

温馨小提示，下面的盒子用的都是Grid布局，如果想要其他布局可以点击这里CSS Grid Generator

盒子html

<div class="parent1">
        <div class="div1">斜分割线</div>
        <div class="div2">SETTINGS</div>
        <div class="div3">HTML</div>
        <div class="div4">CSS</div>
        <div class="div5">1</div>
        <div class="div6">2</div>
    </div>

盒子css

        .parent1 {
            z-index: 1;
            width: 400px;
            height: 200px;
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.7);
            display: grid;
            grid-template-columns: repeat(11, 1fr);
            grid-template-rows: repeat(6, 1fr);
            grid-column-gap: 0;
            grid-row-gap: 0;
            box-shadow: 0 2px 1px -1px rgb(0 0 0/20%), 0 1px 1px 0 rgb(0 0 0/14%), 0 1px 3px 0 rgb(0 0 0/12%);
        }

        .div1, .div2, .div3,.div4 {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .div1 { grid-area: 1 / 5 / 2 / 8; }
        .div2 { grid-area: 2 / 1 / 3 / 4; }
        .div3 { grid-area: 2 / 5 / 3 / 8; }
        .div4 { grid-area: 2 / 9 / 3 / 12; }
        .div5 { grid-area: 4 / 3 / 5 / 10; }
        .div6 { grid-area: 6 / 3 / 7 / 10; }

斜分割线

html

<section>
    <div class="parent1">
        <div class="div1">斜分割线</div>
        <div class="div2">SETTINGS</div>
        <div class="div3">HTML</div>
        <div class="div4">CSS</div>
        <d