用Css歪斜设计

Question

这是我的小提琴：http://jsfiddle.net/WRFx7/4/

.border{
    border-width: 0 0 60px 100vw; /* Or use: 0 0 60px 100vw   to invert! */
    border-style: solid dashed;
}
.border.top{    border-color: #D44032 transparent; }
.border.bottom{ border-color: transparent #D44032; }  

我可以使用图片而不是边框​​吗？我希望实现这样的目标：

或者任何解决方案都会很棒，提前谢谢

Answer 1

之前回答：
发布：CSS3 Transform Skew One Side
小提琴：http://jsfiddle.net/diegoh/mXLgF/1154/

HTML：

<div class="container">
<div id="parallelogram">
    <div class="image"></div>
</div>

CSS：

.container{
    overflow:hidden;
}
#parallelogram {
    width: 150px;
    height: 100px;
    margin: 0 0 0 -20px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
     -o-transform: skew(20deg);
    background: red;
    overflow:hidden;
    position:relative;
}

.image{
    background: url(http://placekitten.com/301/301);
    position:absolute;
    top:-30px;
    left:-30px;
    right:-30px;
    bottom:-30px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
}