Question

我正在从事这个项目，我有些困惑，希望你们能帮助我。

现在如何：

Image on left case

image on right case

我希望它看起来像什么

Image on the left

Image on the right

现在，这是要抓住的地方：由于图像是视差的，因此它们适合屏幕，但是段落的长度可以从小到大变化，因此这些对角线形状必须相应调整。

以下是我目前正在使用的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;
}

Answer 1

您可以使用CSS属性clip-path进行多边形裁剪。

示例：

-webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);

这可用于创建平行四边形剪辑路径。

您可以自己here生成它。

Answer 2

使用CSS属性 FLOAT ，而不是使用Padding将段落和图像设置在所需位置。正确应用和清除浮点数将是您的答案。有关更多信息，请参见https://www.w3schools.com/css/css_float.asp

动态调整所需的CSS形状

2 个答案: