cssで「ギザギザ」の境界線を作る

cssでギザギザの境界線を作るやり方です。

⇊⇊ギザギザとは、こういう感じ⇊⇊

境界線にひと手間加えるだけでPOPになります！

html

<div class="gizagiza"></div>

css

.gizagiza {
    position: relative;
    width: 100%;
    height: 40px;
    background: transparent;
    filter: drop-shadow(0 0 0 rgba(0, 0, 0, 1));
}

.gizagiza::before {
    height: 40px;
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
}

.gizagiza::before {
    top: -40px;
    background: linear-gradient(45deg, #fff 20px, transparent 0), linear-gradient(315deg, #fff 20px, transparent 0);
    background-size: 40px 40px;
}