需要创建div形状，如示例

Question

Hello stackoverflow人，我需要帮助。你们知道如何编辑div的形状吗？我需要创建类似div 1的内容并剪切div 2部分：

甚至可能吗？ Maby，你们可以帮我做这样的事吗？因为我不知道!!

Answer 1

是的，这是可能的。 将顶部歪斜5度并给它一个边框底部。将顶部区域的内容倾斜-5度以确保它再次直线。

HTML：

<div class="wrapper">
    <div class="top">
        <aside class="skew-outer">
            <div class="skew-inner">
                Top content
            </div>
        </aside>
    </div>
     <div class="bottom">
         bottom content
    </div>
</div>

CSS：

.wrapper {
    border: solid red 1px;
}
.bottom {
    padding: 20px;
}
.skew-outer {
    -webkit-transform: skewY(5deg);
    -moz-transform: skewY(5deg);
    -ms-transform: skewY(5deg);
    -o-transform: skewY(5deg);
    transform: skewY(5deg);
    border-bottom: solid red 1px;
    padding: 30px;
}

.skew-inner {
    -webkit-transform: skewY(-5deg);
    -moz-transform: skewY(-5deg);
    -ms-transform: skewY(-5deg);
    -o-transform: skewY(-5deg);
    transform: skewY(-5deg);
}

<强> Fiddle