html - 需要动态调整的css形状

问题描述

我正在做这个项目，我有点卡住了，希望你们能帮助我。

现在怎么样了：

左壳上的图像

右壳上的图像

我希望它看起来像什么：

左图

右图

现在，这里有一个问题：由于图像是视差的，它们适合屏幕，但是段落的长度可以从小变大，因此这些对角线形状必须相应地调整。

下面是我目前正在处理的 HTML 和 CSS：

HTML：

<div class="clearfix bg lbg1">
        <div class="col-md-7 col-sm-7 col-xs-12 sideBox leftBox">
            <h1>
                Why Us?
            </h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
            </p>
        </div>
    </div>
    <div class="clearfix bg rbg1">
        <div class="col-md-6 col-sm-6 col-xs-12 sideBox rightBox pull-right">
            <h1>
                What we Offer?
            </h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat.
            </p>
        </div>
    </div>

CSS：

.lbg1{
    background-image: url('../images/left1.jpg');
}
.rbg1{
    background-image: url('../images/right1.jpg');
}
.lbg2{
    background-image: url('../images/left2.jpg');
}
.rbg2{
    background-image: url('../images/right2.jpg');
}
.bg{
    background-size: cover;
    height: 100%; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.leftBox{
    padding: 30px 30px 30px 100px;
}
.rightBox{
    padding: 30px 100px 30px 30px;
}
.sideBox{
    background-color: #fff;
}
.sideBox h1{
    font-weight: 900;
    margin-bottom: 30px;
}
.sideBox p{
    line-height: 2;
    font-size: 3rem;
    font-weight: 500;
}
.sideBox ul>li{
    line-height: 1.5;
    list-style: circle;
    margin-bottom: 15px;
    margin-left: 15px;
    font-size: 3rem;
    font-weight: 500;
}

标签： htmlcss

html - 需要动态调整的css形状

问题描述

解决方案

推荐阅读