CSS 自定义形状

Question

我怎样才能做出这样的东西:

现在我有:jsfiddle.net/xmqfe3h0/9

#test {
width: 315px;
height: 90%;
position: relative;
}

#test:before {
content: "";
position: absolute;
left: 70%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 50px solid black;   
}

Answer 1

为您的 css3 形状添加倾斜:

  -webkit-transform: skew(40deg);
  -moz-transform: skew(40deg);
  -o-transform: skew(40deg);

JSFIDDLE DEMO