用Css歪斜设计

时间:2015-09-13 04:40:24

标签: jquery html css

这是我的小提琴: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; }  

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

enter image description here

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

1 个答案:

答案 0 :(得分:-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);
}