我如何扭曲div的一侧然后复制它并歪斜另一侧?

时间:2014-08-19 15:55:51

标签: javascript html css skew

假设我有一个div:

div {
    height: 100px; 
    width: 500px; 
    background: blue; 
    margin: 0 auto; 
} 

enter image description here

我希望它成为两种模式 - 每一方skew -

enter image description here

以下是基本表单 - http://jsfiddle.net/urielz/neybabgj/

我怎样才能得到上述两种形式?

更新:

如果需要使用JavaScript - 请执行此操作。

2 个答案:

答案 0 :(得分:4)

JSiddle Demo

<强> 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:'';
}

小提琴:http://jsfiddle.net/neybabgj/7/