【CSS】セクション間の区切り（画像を下三角/斜め）

自分用メモなのでお許しください。

完成図

HTML

<div class="main">
  内容             
 </div>

CSS

.main::before {
    content: "";
    width: 100%;
    height: 55px;
    background-color: #3d5a80;
    position: absolute;
    bottom: -1px;
    clip-path: polygon(0% 0%, 0% 100%, 50% 100%);
 }

.main::after {
    content: "";
    width: 100%;
    height: 55px;
    background-color: #3d5a80;
    position: absolute;
    bottom: -1px;
    clip-path: polygon(50% 100%, 100% 0%, 100% 100%);
}

画像を切り抜くのではなく、三角を疑似要素として追加する！

完成図

HTML

<div class="main">
  内容             
 </div>

CSS

.main::before {
　　position: relative;
 }

.main::after {
    position: absolute;
    display: block;
    content: "";
    width: 100%;
    height: 100px;
    background-color: #e7e7e7;
    clip-path: polygon(0 0, 302% 100%, 100% 100%, 0 100%);
    top: 87%;
    left: 0;
}

参考サイト