html - 梯形截面,剪切背景图像
问题描述
我正在尝试创建一个带有梯形形状的网页布局,如所附图像中所示。此外,每个部分都有一个background-image
用cover
或类似的结果填充背景。
第一部分(深蓝色)我只使用skew
两个 div 就实现了,如下所示。
但是,我无法创建以下部分,它以两种方式倾斜。我尝试过使用clip-path
没有运气。然后最后一部分需要再次摆正。
HTML
<section id="my_section">
<div id="my_section_bg"></div>
<div id="my_section_content">
<!-- any typical content, text/images here -->
</div>
</section>
CSS
#my_section {
padding-top: 80px;
padding-bottom: 90px;
background-color: rgba(74,90,119,.5);
transform: skewY(-4deg);
}
#my_section_bg {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-image: linear-gradient(
to bottom,
rgba(29,44,71,.85) 0%,
rgba(29,44,71,1) 100%
), url("./assets/my_bg_img.jpeg");
background-color: rgba(29,44,71,1);
transform: skewY(8deg);
}
#my_section_content {
transform: skewY(4deg);
}
解决方案
您可以简单地将第二个倾斜部分的一部分隐藏在第一个下方以创建此效果。最后一节也是一样的:
这是一个基本示例:
.box {
min-height:250px;
position:relative;
overflow:hidden;
transform-origin:left; /*this will do the magic*/
max-width:1000px;
margin:auto;
}
.box:before {
content:"";
position:absolute;
top:-100px;
left:0;
right:0;
bottom:-100px;
transform-origin:left;
background:var(--img,red) center/cover;
}
.first {
transform:skewY(5deg);
z-index:2;
--img:url(https://picsum.photos/800/600?image=0)
}
.first:before {
transform:skewY(-5deg);
}
.second {
transform:skewY(-5deg);
z-index:1;
--img:url(https://picsum.photos/800/600?image=1069)
}
.second:before {
transform:skewY(5deg);
}
.last {
--img:url(https://picsum.photos/800/600?image=1053);
margin-top:-100px;
}
<div class="first box">
</div>
<div class="second box">
</div>
<div class="last box">
</div>
或者clip-path
你可以像下面那样做(调整50px
到处来控制角度)
.box {
min-height:250px;
position:relative;
overflow:hidden;
max-width:1000px;
margin:auto;
}
.first {
clip-path:polygon(0 0,100% 50px, 100% 100%,0 100%);
background:url(https://picsum.photos/800/600?image=0) center/cover;
}
.second {
clip-path:polygon(0 50px,100% 0, 100% 100%,0 calc(100% - 50px));
z-index:1;
margin:-50px auto;
background:url(https://picsum.photos/800/600?image=1069) center/cover;
}
.last {
background:url(https://picsum.photos/800/600?image=1053) center/cover;
}
<div class="first box">
</div>
<div class="second box">
</div>
<div class="last box">
</div>
推荐阅读
- java - Spring boot + JavaFX:如何在 start() 方法之后异步运行任务
- node.js - 使用express node.js,在函数中调用函数并在路由器中导出和要求,并在路由器中渲染时交给ejs
- sqlite - 将数组传输到 SQLite 中,反之亦然,无需循环,尤其是在 ActionScript3 中
- python - 通过数组内对象的两个值过滤 mongoengine/mongodb-query 中的项目
- amazon-s3 - 如何向 S3.upload() 请求添加“授权”标头?
- javascript - 如何仅对 JavaScript 中的前 3 个字符和最后一个字符进行分组(例如 123456789 => 123 45678 9)
- google-data-studio - 为什么在使用服务帐户访问底层 bigquery 数据时,社区连接器的“数据凭据”不能为空?
- python - 波函数 Python 上的曲柄 Nicolson 方法
- authentication - 需要帮助来修复此错误“对等方重置连接 - SSL_connect”
- javascript - 将视频上传预览附加到 div