假设我有一个div:
div {
height: 100px;
width: 500px;
background: blue;
margin: 0 auto;
}
我希望它成为两种模式 - 每一方skew -
以下是基本表单 - http://jsfiddle.net/urielz/neybabgj/
我怎样才能得到上述两种形式?
更新:
如果需要使用JavaScript - 请执行此操作。
答案 0 :(得分:4)
<强> CSS 强>
div {
height : 100px;
width : 500px;
background : blue;
margin : 10px auto;
position: relative;
}
div:first-child:before {
position: absolute;
top:0;
right:100%;
width:0;
height:0;
content:'';
border:50px solid blue;
border-top-color:transparent;
border-left-color:transparent;
}
div:nth-child(2):after {
position: absolute;
top:0;
left:100%;
width:0;
height:0;
content:'';
border:50px solid blue;
border-bottom-color:transparent;
border-right-color:transparent;
}
答案 1 :(得分:2)
HTML
<div class="crop">
<div class="skew"></div>
</div>
CSS
.crop {
width: 492px;
height: 240px;
overflow: hidden;
}
.skew {
display: block;
height : 100px;
width : 500px;
background : blue;
margin : 0 auto 0 32px;
position:relative;
-webkit-transform: skew(-30deg);
-moz-transform: skew(-30deg);
-ms-transform: skew(-30deg);
transform: skew(-30deg);
}
.skew:after {
height : 100px;
width : 500px;
background : blue;
margin : 0 auto;
position:absolute;
bottom: -120px;
content:'';
}