Css 3自定义梯形 [英] Css 3 custom trapezoid

问题描述

我需要create div，看起来像在提供的图像上。注意黑色和灰色区域。我一直在试验css 3，但我能够创建只有不同的旋转梯形。

$ b

trapezoid {

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

}


它产生的梯形是好的，但它不同的旋转和无法找出如何旋转它

解决方案

您可以使用 skew 'ed伪元素。类似：

  div {height：100px;背景：番茄; padding-top：10px;位置：相对; overflow：hidden;} div：before {content：; position：absolute; top：0; left：0; width：100％;身高：150％背景：灰色-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;背景：灰色;位置：相对; } div：before {content：;位置：绝对; top：0; left：0; border-left：90vw solid transparent; border-top：10px solid red; -webkit-transform：translateZ（0）; transform：translateZ（0）; }  

 < div>< / div> code> 

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

解决方案

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>

这篇关于Css 3自定义梯形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！