形状为div的斜底边框 [英] Shape oblique bottom border of a div

问题描述

我正在构建一个简单的网站，在其着陆页上我需要两个背景。为此，我使用了两个div，一个在另一个之上。到目前为止一直很好。

I'm building a simple website, and on its landing page I need two backgrounds. For that, I'm using two divs, one on top of the other. So far so good.

问题是，我希望第一个div的底部边框（或第二个div的顶部边框）是倾斜的。这是我想要做的草图：

The problem is, I want the bottom border of the first div (or the top border of the second) to be oblique. This is a sketch of what I want to do:

知道如何实现这个目标吗？

Any idea how to accomplish this?

我找到了这篇文章，但它只适用于浮动元素，并且它看起来似乎不稳定。

I found this article, but it only works with floating elements, and it doesn't seem stable at all.

http://sarasoueidan.com/blog/css-shapes/

提前致谢！

html：

div class="main-container" id="main-container1">
    //all kinds of stuff
</div>

<div class="main-container" id="main-container2">
      //all kinds of stuff
</div>

css：

#main-container1{
    background: url(../img/background1.jpg);
    background-position:center;


}

#main-container2{
    background: url(../img/background2.jpg);
    background-position:center;


}

推荐答案

不是最好的方法

.second {
    width:500px;
    height:300px;
    transform:skewY(20deg);
    background:orange;
    margin-top:-100px;
    border:2px solid green;
}

.holder{
    width:500px;
    height:800px;
    background:grey;
}

.second p{
    position:absolute;
    margin-top:200px;
    transform:skewY(-20deg);
}

<div class="holder">
    <div class="second"><p>Div 1</p></div>
</div>

这篇关于形状为div的斜底边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！