<div class="section"></div>
<div class="section title">
<h1>Diagonal bg?</h1>
</div>
<div class="section"></div>
<div class="section borders">
<h2>Option 1: border</h2>
</div>
<div class="section"></div>
<div class="section gradient">
<h2>Option 2: linear-gradient()</h2>
</div>
<div class="section"></div>
<div class="section svg">
<h2>Option 3: SVG</h2>
</div>
<div class="section"></div>
<div class="section clip">
<h2>Option 4: clip-path()</h2>
</div>
<div class="section"></div>
<div class="section skew">
<h2>Option 5: skewY()</h2>
</div>
<div class="section"></div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Reenie Beanie", Tahoma, sans-serif;
}
h1, h2 {
margin-top: 0;
margin-bottom: 10px;
font-weight: 400;
line-height: 1.4;
}
h1 { font-size: 70px; }
h2 { font-size: 50px; }
.section {
min-height: 33.33vh;
&:nth-child(even) {
display: flex;
justify-content: center;
align-items: center;
color: #fff;
background-color: #f25f5c;
}
&:nth-child(even):not(.title) {
outline: 1px dashed rgba(0,0,0, .3);
}
}
.title {
position: relative;
padding: 100px 0;
overflow: hidden;
&::before, &::after {
content: '';
position: absolute;
border-width: 0 0 50px 100vw;
border-style: solid;
}
&::before {
top: 0;
border-color: #fff #fff #f25f5c #fff;
}
&::after {
bottom: 0;
border-color: #f25f5c #f25f5c #fff #f25f5c;
}
}
// Option 1: border
.borders {
position: relative;
padding: 100px 0;
overflow: hidden;
&::before, &::after {
content: '';
position: absolute;
border-width: 0 0 50px 100vw;
border-style: solid;
}
&::before {
top: 0;
border-color: #fff #fff #f25f5c #fff;
}
&::after {
bottom: 0;
border-color: #f25f5c #f25f5c #fff #f25f5c;
}
}
// Option 2: linear-gradient()
.gradient {
padding: 100px 0;
background:
linear-gradient(to right bottom, #fff 0%, #fff 50%, #f25f5c 50%, #f25f5c 100%) top no-repeat,
linear-gradient(to right bottom, #f25f5c 0%, #f25f5c 50%, #fff 50%, #fff 100%) bottom no-repeat;
background-size: 100% 50px;
}
// Option 3: SVG
.svg {
position: relative;
padding: 100px 0;
&::before,
&::after {
content: '';
position: absolute;
width: 100%;
height: 50px;
}
&::before {
top: 0;
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" class="top triangle" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" fill="#fff"><path d="M0 0h100L0 100z"/></svg>');
}
&::after {
bottom: 0;
background-image: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" class="bottom triangle" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" fill="#fff"><path d="M100 0v100H0z"/></svg>');
}
}
// Option 4: clip-path()
.clip {
position: relative;
padding: 50px 0;
background-clip: padding-box;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
&::before, &::after {
content: '';
position: absolute;
width: 100%;
height: 50px;
background-color: inherit;
}
&::before {
bottom: 100%;
-webkit-clip-path: polygon(0% 100%, 100% 0%, 100% 100%);
}
&::after {
top: 100%;
-webkit-clip-path: polygon(0% 0%, 100% 0%, 0% 100%);
}
}
// Option 5: skewY()
.skew {
position: relative;
z-index: 1;
&::before, &::after {
content: '';
position: absolute;
z-index: -1;
width: 100%;
height: 50%;
background-color: inherit;
transform: skewY(-3deg); // magic number
}
&::before {
top: 0;
transform-origin: 0;
}
&::after {
bottom: 0;
transform-origin: 100% 100%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.