.spikes { position: relative; background: #2c3e50; height: 50vh; } .spikes::after { content: ''; position: absolute; right: 0; left: 0; top: 100%; z-index: 10; display: block; height: 62px; background-size: 62px 100%; background-image: linear-gradient(135deg, #2c3e50 25%, transparent 25%), linear-gradient(225deg, #2c3e50 25%, transparent 25%); background-position: 4%; }
![色んな形のセクションの区切りを作成してHTML/CSSをコピーできるWebサービス「CSS Section Separator Generator」](https://cdn-ak-scissors.b.st-hatena.com/image/square/615fbd15f607d2aebbd24a17f15d87405cf65f0e/height=288;version=1;width=512/https%3A%2F%2Ftechmemo.biz%2Fwp-content%2Fuploads%2F2020%2F04%2Fcss-section-separator-generator.png)