Css 3自定义梯形

Question

你好， 我需要创建div，它在提供的图像上看起来像一个。注意黑色和灰色区域。我一直在试验css 3，但我只能创建不同旋转的梯形。是否可以仅使用css创建它？

编辑：我试过的是这个

trapezoid {

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

}

它产生的梯形很好但是它的旋转不同，我无法弄清楚如何旋转它

Answer 1

您可以使用skew＆＃39; ed伪元素。类似的东西：

＆＃13;

＆＃13;

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);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

另一种方法是：

＆＃13;

＆＃13;

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);
  }

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你必须使用一个虚拟div来使其表现为需要旋转并使尾部可见

#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>

Answer 3

这是您的预期输出：

.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>

希望它有所帮助。