这是我的小提琴: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; }
我可以使用图片而不是边框吗?我希望实现这样的目标:
或者任何解决方案都会很棒,提前谢谢
答案 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);
}