Css3自定义梯形

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 伪元素。类似于：

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>

另一种方法是：

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>

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>

希望对您有所帮助。

Css3自定义梯形

Css 3 custom trapezoid

html

css

css-shapes