如何使用容器中間的傾斜屬性頂部和底部

Question

我使用我的代碼片段中的代碼具有中間的形狀，你可以看到如果你運行代碼片段，除了最後一個框。不過，我不想在框之間的間距白，但我在努力做到這一點

.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>

希望你能幫助我實現與更好的技術。

在此先感謝

Answer 1

對於您768,16使用另一種簡單的技術，像這樣的

DEMO HERE

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> 

Answer 2

只需添加margin-bottom: -20px;到.image-container，使他們更接近

.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; 
 
    margin-bottom: -20px; 
 
} 
 
.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>