CSS Skewed Separator Generator
Generate dynamic and visually captivating sections that break away from the norm and make your websites truly unique. Create non-rectangular/slanted containers using our skewed separator generator.
Preview
Code
<section class="skewed">
Hello World!
</section>CSS
.skewed {
background: #3498db;
position: relative;
padding: 50px 10px 50px 10px;
width: 100%;
box-sizing: border-box;
z-index: 0;
}
.skewed:before, .skewed:after {
content: '';
background: inherit;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.skewed:before {
transform: skewY(-6deg);
transform-origin: top left;
}
.skewed:after {
transform: skewY(6deg);
transform-origin: top left;
}