如何倾斜 div 的一侧，然后复制它并倾斜另一侧？答案

【问题标题】：How can I skew one side of a div and then replicate it and skew a different side?如何倾斜 div 的一侧，然后复制它并倾斜另一侧？
【发布时间】：2014-08-19 15:55:50
【问题描述】：

假设我有一个 div：

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

而且我希望它变成两种模式 - skew 到每一边 -

这是基本形式 - http://jsfiddle.net/urielz/neybabgj/

我怎样才能得到以上两种形式？

更新：

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

【问题讨论】：

在不使用 JavaScript 或其他动态语言的情况下，您无法将一个 div 做成两个。您需要选择一个或另一个，或添加另一个 div。
不清楚你想做什么。
@TylerH ：查看我的更新
@Paulie_D：什么不清楚？只需将 div 作为两个附加表单...
这是一把能敲碎坚果的锤子！但是，您可能希望这样做：stackoverflow.com/questions/22069704/skew-one-corner-of-image。但我会坚持使用三角形：stackoverflow.com/questions/16748387/…

标签： javascript html css skew

【解决方案1】：

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;
}

【讨论】：

【解决方案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/

【讨论】：