使用Clipped overflow创建一个'trapezium'形状的div

Question

我想知道是否有人知道如果可能的话，如何使用CSS / Html / Canvas创建梯形。

我试图将哈希值排在一起只是非常混乱，并且在现实世界中无法使用。

div {
 width:0;
 margin-left:-1000px;
 height:100px; 
 border-right:1000px solid lightblue;
 border-top:60px solid transparent;
 border-bottom:60px solid transparent; 
 padding-left:1000px;
 white-space:no-wrap;
}

继承人我的jsFiddle ...

http://jsfiddle.net/Liama​​tvenn/WWYYM/

Answer 1

我可以用2个额外的div作为包装器。

CSS

.trapezium {
    position: absolute;
    left: 40px;
    top: 40px;
    width: 300px;
    height: 200px;
    -webkit-transform: skewY(6deg);
    overflow: hidden;
}

.trapezium > div {
  background-color: yellow;
    position: absolute;
    left: 0px;
    top: 50px;
    width: 300px;
    height: 200px;
    -webkit-transform: skewY(-12deg);
    overflow: hidden;
}

.trapezium > div > div {
  font-size: 60px;
  background-color: yellow;
    position: absolute;
    left: 0px;
    top: -30px;
    width: 300px;
    height: 200px;
    -webkit-transform: skewY(6deg);
    overflow: hidden;
}

演示

Answer 2

我不知道你想要什么。 所以我想这会对你有所帮助。

  div {
   width:0;
   margin-left:-100px;
   height:100px; 
   border-right:100px solid lightblue;
   border-top:60px solid transparent;
   border-bottom:60px solid transparent; 
   padding-left:100px;
   white-space:no-wrap;
 }

Answer 3

你在说这样的话吗？ 检查这个小提琴：jsfiddle.net/WWYYM/3/。 请让我知道这对你有没有用。 我编辑了你的代码，如下所示：

div {
  border-bottom: 100px solid lightblue;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 500px;
  white-space:no-wrap;
  text-align:center;
}

Answer 4

你可以在下面添加变换：

div {
width:0;
margin-left:-50px;
margin-top: -500px;
height:100px;
border-right:100px solid lightblue;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
padding-left:1000px;
white-space:no-wrap;

transform:rotate(20deg);
-ms-transform:rotate(20deg); /* IE 9 */
-webkit-transform:rotate(90deg);


}