CODEWITHSUNDEEP
csscss-shapes
user1133297
user1133297

Reputation:

How to achieve a trapezoid in CSS3?

I'm trying to achieve the following container in CSS3. I tried with transform: skewY but i don't have the desired result. I know that I can achieve it with 3d Transforms, but I have in mind our lovely Internet Explorer. Also I tried to play with pseudo elements but I lost it. Is there any css rule that I can, lets say, increase the height of the top and bottom right corners?

JSFiddle

Thank you

trapezoid

Upvotes: 1

Views: 341

Answers (1)

jbutler483
jbutler483

Reputation: 24559

You could use skewed pseudo elements for this (ensuring the skews are on the pseudos, and not the element itself):

div {
  position: relative;
  height: 200px;
  width: 80vw;
  margin: 10vw;
}
div:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 90%;
  width: 100%;
  -webkit-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  transform: skewY(5deg);
  background: gray;
  z-index: -1;
}
div:before {
  content: "";
  position: absolute;
  height: 90%;
  width: 100%;
  left: 0;
  bottom: -20%;
  background: gray;
  -webkit-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  transform: skewY(-5deg);
  z-index: -1;
}
html {
  background: url(http://placekitten.com/g/300/300);
}
<div>Content!!</div>

Upvotes: 2

Related Questions