我使用我的代码片段中的代码将形状放在中间,如果您运行该代码片段,您会看到,除了最后一个框。但是,我不想要框之间的白色间距,但我正在努力做到这一点
.image-container {
position: relative;
width: 100%;
height: 331px;
padding: 40px 20px;
box-sizing: border-box;
text-align: center;
display: flex;
flex-flow: wrap column;
align-items: center;
justify-content: center;
}
.image-container:before {
content: '';
position: absolute;
z-index: -4;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.image-container.image-container-col-2 .image-container-split:nth-child(odd) {
left: 0;
right: 50%;
}
.image-container.image-container-col-2 .image-container-split:nth-child(even) {
left: 50%;
right: 0;
}
.image-container-split {
position: absolute;
z-index: -3;
top: 0;
bottom: 0;
box-sizing: border-box;
border: 20px solid transparent;
border-bottom-color: #fff;
padding-bottom: 20px;
display: flex;
flex-direction: wrap column;
align-items: center;
justify-content: center;
}
.image-container-split:first-child {
border-left: none;
padding-left: 20px;
}
.image-container-split:last-child {
border-right: none;
padding-right: 20px;
}
.image-container-split:before {
content: '';
position: absolute;
z-index: -1;
top: -20px;
border: 10px solid #fff;
border-bottom-color: transparent;
}
.image-container-split:nth-child(odd):before {
right: -20px;
border-left-color: transparent;
}
.image-container-split:nth-child(even):before {
left: -20px;
border-right-color: transparent;
}
.image-container-split:after {
content: '';
position: absolute;
z-index: -3;
top: -20px;
left: 0;
right: 0;
bottom: -20px;
opacity: 0.5;
border: 20px solid transparent;
border-bottom-color: #fff;
}
.image-container-split:first-child:after {
border-left: none;
}
.image-container-split:last-child:after {
border-right: none;
}
.image-container-split:nth-child(odd):after {
background-color: red;
right: -20px;
}
.image-container-split:nth-child(even):after {
background-color: red;
left: -20px;
}
.new_container{
background: blue;
}
.blue{
background-color: blue;
}
<section id="latest_news">
<div class="skewing_mixin">
<div class="image-container image-container-col-2">
<div class="container">
<!-- content goes here -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate ex aspernatur praesentium iste ratione nesciunt consectetur animi, temporibus, commodi quibusdam, nemo assumenda provident nam vel? Necessitatibus sint sit illum atque.
</div>
<div class="image-container-split-container">
<div class="image-container-split">
</div>
<div class="image-container-split">
</div>
</div>
</div>
</div>
<div class="skewing_mixin">
<div class="image-container image-container-col-2">
<div class="container">
<!-- content goes here -->
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione animi expedita, fugiat deleniti sit quos in accusamus laboriosam! Nulla rerum vero sunt accusamus. Suscipit nesciunt reiciendis est repudiandae sunt modi.
</div>
<div class="image-container-split-container">
<div class="image-container-split blue">
</div>
<div class="image-container-split blue">
</div>
</div>
</div>
</div>
<div class="new_container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque corrupti voluptatibus sapiente optio modi veritatis eveniet corporis deleniti aspernatur dolores atque doloribus alias, laborum officiis quod consectetur! Possimus magni, officiis.
</div>
</section>
希望你能帮助我用更好的技术实现这一目标。
提前致谢
最佳答案
为此你应该使用另一种像这样的简单技术
CSS
.first,
.second,
.third {
position: relative;
display: block;
height: 100px;
padding: 20px;
}
.first {
background: red;
}
.first:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 0, 0, 0);
border-top-color: red;
border-width: 30px;
margin-left: -30px;
z-index: 2;
}
.second {
background: blue;
}
.second:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 255, 0);
border-top-color: blue;
border-width: 30px;
margin-left: -30px;
z-index: 2;
}
.third {
background: yellow;
}
HTML
<div class="first">
sdfsdfsdfsdfsdf
</div>
<div class="second">
sdfsdfsdfsdfsfs
</div>
<div class="third">
sdfsdfsdfsdfs
</div>
关于html - 如何在容器中间使用倾斜属性到顶部和底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44071380/