<div class="contents">
<div class="contents1">
<p>コンテンツ1</p>
</div>
<div class="contents2">
<div class="wrapper">
<p>コンテンツ2</p>
</div>
</div>
<div class="contents3">
<p>コンテンツ3</p>
</div>
</div>.contents {
background-color: #FFD500;
}
.contents1 {
color: #000;
padding: 60px 30px;
}
.contents2 {
color: #FFD500;
padding: 10vw 30px;
background-color: #000;
clip-path: polygon(0 10vw, 100% 0, 100% calc(100% - 10vw), 0% 100%);
}
.contents2 .wrapper {
padding: 60px 0;
}
.contents3 {
color: #000;
padding: 60px 30px;
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.