I'm trying to create a skewed background on my website. The blocks will all have a skewed top and bottom line (like a parallelogram).
Tried using css:
transform: skewY(-30deg);
but it's not working responsively. Any thoughts on a good practice?
Here is a start, both very lightweight
Using a pseudo element
.wrapper div.skew::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120vw;
height: 100%;
transform: translate(-50%, -50%) rotate(-30deg) skew(-30deg);
background: lightgray;
z-index: -1;
}
.wrapper {
overflow: hidden;
}
.wrapper div {
position: relative;
padding: 50px;
border: 1px dashed gray;
text-align: center;
}
.wrapper div.skew::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120vw;
height: 100%;
transform: translate(-50%, -50%) rotate(-30deg) skew(-30deg);
background: lightgray;
z-index: -1;
}
<div class="wrapper">
<div>
Some text
</div>
<div class="skew">
Some text
</div>
<div>
Some text
</div>
</div>
Using linear-gradient
html {
background: linear-gradient(
-30deg,
transparent 40%,
#bbb 40%,
#bbb 60%,
transparent 60%);
}
html {
background: linear-gradient(
-30deg,
transparent 40%,
#bbb 40%,
#bbb 60%,
transparent 60%);
}
div {
position: relative;
padding: 50px;
border: 1px dashed gray;
text-align: center;
}
<div>
Some text
</div>
<div class="skew">
Some text
</div>
<div>
Some text
</div>