css - 需要像示例中那样创建 div 形状

Question

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

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

Answer 1

是的，这是可能的。将顶部 block 倾斜 5 度并给它一个底部边框。将顶部 block 的内容倾斜 -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