slanted div top and bottom CSS

问题

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>

回答1:

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

回答2:

There is a borders sollution 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>

回答3:

You can use the CSS3 clip-path property to achieve the desired outcome. Below is a working js fiddle.

clip-path: polygon(0% 0%, 100% 20%, 100% 85%, 0 100%);
-webkit-clip-path: polygon(0% 0%, 100% 20%, 100% 85%, 0 100%);

http://jsfiddle.net/niteshp27/fgdcq3qp/5/

来源：https://stackoverflow.com/questions/42003877/slanted-div-top-and-bottom-css

标签

html

css

css-shapes