html – 形状div的斜底边框

2023年7月13日 387次阅读

我正在建立一个简单的网站,在我的登陆页面上我需要两个背景.为此,我使用了两个div,一个在另一个之上.到现在为止还挺好.

问题是,我希望第一个div的底部边框(或第二个div的顶部边框)是倾斜的.这是我想要做的草图：

知道怎么做到这一点？

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

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>
点赞