I am trying to make the following slanted div. I have nearly achieved the shape below however the bottom is not slanting in the correct direction as my shape below. How can i correct this?
Shape Attached
http://jsfiddle.net//fgdcq3qp/
CSS
.slanted {
background: red;
box-sizing: border-box;
height: 40vh;
width: 100%;
position: relative;
padding: 20px;
}
.slanted:before {
content: "";
background: red;
height: 40px;
transform: skewY(2deg);
position: absolute;
left: 0;
right: 0;
z-index: -1;
}
.slanted:after {
content: "";
background: red;
height: 40px;
transform: skewY(1deg);
position: absolute;
left: 0;
right: 0;
z-index: -1;
}
.slanted:before{
top: -20px;
}
.slanted:after {
bottom: -30px;
}
HTML
<div class="slanted">
<h2>Hello World!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis et debitis pariatur perferendis adipisci doloribus aspernatur ea quo illum a.</p>
There is a borders solution too, create a long left one in color and make the top and the bottom transparent.
#trap {
height: 100px;
border-top: 20px solid transparent;
border-left: 500px solid aqua;
border-bottom: 30px solid transparent;
}
<div id="trap"></div>
Simply change skewY
for .slanted:after
to a negative number and adjust the height
accordingly (numbers below just an example - adjust to how you want it):
.slanted:after {
content: "";
background: red;
height: 80px;
transform: skewY(-5deg);
position: absolute;
left: 0;
right: 0;
z-index: -1;
}
Updated Fiddle
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With