使用CSS實(shí)現(xiàn)鋸齒形邊框的示例代碼

發(fā)布時(shí)間：2023-09-08 11:58:31 作者：一條會(huì)coding的Shark

今天給大伙帶來(lái)的是一個(gè)鋸齒形邊框，類似于傳統(tǒng)郵票的邊框，有一圈鋸齒形狀，其實(shí)看到這種效果，相信很多人第一反應(yīng)是采用偽元素的方式添加小三角形來(lái)實(shí)現(xiàn)鋸齒狀，確實(shí)是這樣的，下面就帶大家來(lái)實(shí)現(xiàn)它,

前言

不知道大伙有沒有見過(guò)下面這種效果。

沒錯(cuò)，這回給大伙帶來(lái)的是一個(gè)鋸齒形邊框，類似于傳統(tǒng)郵票的邊框，有一圈鋸齒形狀，具體效果可參考下面的圖片。其實(shí)看到這種效果，相信很多人第一反應(yīng)是采用偽元素的方式添加小三角形來(lái)實(shí)現(xiàn)鋸齒狀，確實(shí)是這樣的，下面就帶大家來(lái)實(shí)現(xiàn)它。

效果預(yù)覽

結(jié)構(gòu)構(gòu)建

HTML這一部分很簡(jiǎn)單，使用html5標(biāo)簽section包裹內(nèi)容即可。

 <section>
      <h2>Border</h2>
 </section>

section的作用是創(chuàng)建一個(gè)區(qū)塊，通常用于組織和包容相關(guān)的內(nèi)容，可以添加其他內(nèi)容或樣式來(lái)補(bǔ)充、裝飾或定義該section區(qū)塊的特性。

總的來(lái)說(shuō)就是我們創(chuàng)建了一個(gè)section區(qū)塊，其中包含了一個(gè)標(biāo)題Border的二級(jí)標(biāo)題。這個(gè)section可以用于組織相關(guān)的內(nèi)容，并根據(jù)需要進(jìn)行進(jìn)一步的樣式和布局設(shè)置。

樣式設(shè)計(jì)

CSS部分主要在section標(biāo)簽上做文章，我們先來(lái)定義section元素的樣式。

section{
    position: relative;
    width: 100%;
    height: 100%;
    background: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6894176262634e7ca3e4dc2d9c6f4735~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=1080&s=433827&e=jpg&b=034681),linear-gradient(45deg,#ff3479,#0319f4);
    background-blend-mode: soft-light;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 50px solid #fff;
    border-right: 50px solid #fff;
}

我們將section元素定義為一個(gè)占滿父元素、具有白色實(shí)線邊框的容器。這個(gè)容器使用彈性布局，將子項(xiàng)在水平和垂直方向上都居中對(duì)齊。通過(guò)設(shè)置背景屬性，可以添加自定義的背景樣式，例如背景圖片、背景混合模式等等。

background-blend-mode: soft-light是用于設(shè)置背景的混合模式為 soft-light，這是一種混合模式用于調(diào)整背景與內(nèi)容之間的顏色和明暗關(guān)系。

接下來(lái)就是最關(guān)鍵的部分了，利用偽元素實(shí)現(xiàn)鋸齒狀。

section::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    display: block;
    background: linear-gradient(-45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%),
    linear-gradient(45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%);
    background-size: 30px 60px;
}

section::after{
   ......
    top: 0;
    left: 0;
   ......
    transform: rotate(180deg);
}

這兩段大部分內(nèi)容是相同的，因此在這里我將由區(qū)別的部分拿出來(lái)講一下。利用用::before和::after偽元素為section元素添加了棋盤狀背景圖案。通過(guò)兩個(gè)線性漸變，其中透明色和白色的比例按照百分比來(lái)控制，創(chuàng)建出棋盤圖案的效果。這樣的樣式可以用于裝飾section元素，增加視覺效果和細(xì)節(jié)來(lái)提升整體的外觀。

對(duì)于兩者有區(qū)別的部分，top: 0和left: 0將偽元素相對(duì)于父元素的頂部和左側(cè)邊緣進(jìn)行定位；bottom: 0和left: 0將偽元素相對(duì)于父元素的底部和左側(cè)邊緣進(jìn)行定位。可以理解為兩者將四邊都占滿了。transform: rotate(180deg)對(duì)偽元素應(yīng)用旋轉(zhuǎn)變換，將其旋轉(zhuǎn)180度，即使它成為 <section> 元素背景的頂部。可以理解為默認(rèn)為底部，通過(guò)轉(zhuǎn)換之后變成頂部。

完整代碼

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <section>
        <h2>Border</h2>
    </section>
</body>
</html>

css：

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
section{
    position: relative;
    width: 100%;
    height: 100%;
    background: url(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6894176262634e7ca3e4dc2d9c6f4735~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1920&h=1080&s=433827&e=jpg&b=034681),linear-gradient(45deg,#ff3479,#0319f4);
    background-blend-mode: soft-light;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 50px solid #fff;
    border-right: 50px solid #fff;
}
section h2{
    color: #fff;
    font-size: 20em;
    text-align: center;
}
section::before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    display: block;
    background: linear-gradient(-45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%),
    linear-gradient(45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%);
    background-size: 30px 60px;
}
section::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    display: block;
    background: linear-gradient(-45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%),
    linear-gradient(45deg,transparent 33.33%,#fff 33.33%,#fff 66.666%,transparent 66.666%);
    background-size: 30px 60px;
    transform: rotate(180deg);
}