这是我的 fiddle :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; }
我可以使用图像而不是边框吗?我想实现这样的目标:
或者任何解决方案都很好,提前致谢
最佳答案
之前回答过:
邮寄:CSS3 Transform Skew One Side
fiddle :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);
}
关于jquery - 使用 Css 进行倾斜设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32546359/