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

Answer 2

您必须将其拆分为矩形和三角形。可以使用CSS转换（带旋转的嵌套框）生成三角形。您必须设置背景图像的正确位置。