Css 3 custom trapezoid

问题:

Hi , I need create div which would look like one on the provided image. Notice black and grey zones. I have been experimenting with css 3 but i was able to create only differently rotated trapezoid. Is it possible to create this only with css ?

EDIT: What ive tried was this

trapezoid {

    border-bottom: 100px solid red;
    border-left: 150px solid transparent;
    border-right: 0px solid transparent;
    height: 0;

}

It produces trapezoid which is nice but its differnetly rotated and i cant figure out how to rotate it

回答1:

You could use a skew'ed pseudo element for this. Something like:

div {
  height: 100px;
  background: tomato;
  padding-top: 10px;
  position: relative;
  overflow: hidden;
}
div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  background: gray;
  -webkit-transform-origin: top left;
  -webkit-transform: skewY(2deg);
  -moz-transform-origin: top left;
  -moz-transform: skewY(2deg);
  transform-origin: top left;
  transform: skewY(2deg);
}

<div></div>

---

Another Approach would be:

div{
  height:100px;
  width:90vw;
  margin:0;padding:0;
  padding-top:10px;
  background:gray;position:relative;
  }
div:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  border-left:90vw solid transparent;
  border-top:10px solid red;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
  }

<div></div>

回答2:

You have to take a dummy div to make it behave as want that to rotate and make the tail visible

#black {
  background-color: black;
  position: absolute;
  -ms-transform: rotate(1deg);
  /* IE 9 */
  -webkit-transform: rotate(1deg);
  /* Safari */
  transform: rotate(1deg);
  top: -95px;
}
#grey {
  background-color: grey;
  position: absolute;
  top: 0px;
}
div {
  width: 100%;
  height: 100px
}

<div id="grey"></div>
<div id="black"></div>

回答3:

This is what your expected output:

.main {
    background: none repeat scroll 0 0 grey;
    height: 80px;
    overflow: hidden;
    position: relative;
    width: 380px;
}
.inner {
    background: none repeat scroll 0 0 red;
    height: 80px;
    left: 400px;
    margin: 0 auto;
    top: 80px;
    width: 150px;
    z-index: 99999;
}
.inner::before {
    border-bottom: 0 solid transparent;
    border-right: 100px solid red;
    border-top: 83px solid transparent;
    bottom: 0;
    content: "";
    height: 66px;
    left: 15px;
    position: absolute;
    right: 100%;
    top: 0;
    width: 0;
}

<div class="main">
<div class="inner"></div></div>

Hope it helps.