<分区>
<分区>
我正在做这个元素，我有点卡住了，希望你们能帮帮我。
现在怎么样了:
我希望它看起来像什么:
现在，重点是: 由于图像是视差的，它们适合屏幕，但是段落的长度可以从小到大变化，因此这些对 Angular 线形状必须相应地调整。
下面是我目前正在处理的 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;
}
最佳答案
您可以使用 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 .
关于html - CSS形状需要动态调整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51095594/