如何通過wordpress網站製作形狀將一篇文章的背景與另一篇文章連接起來？我附上了該圖片

Question

抱歉，我無法清楚地表達出來。但我已附加圖片以瞭解我所問的內容。 Image here

Answer 1

這些不是「連接的backgorunds」。這是通過在藍底部分的底部添加一個帶有負底部邊距的三角形來實現的，這可以是PNG圖像或用css製作（https://css-tricks.com/examples/ShapesOfCSS/）

如果您可以編輯模板文件（我將使用您擁有的圖像作爲示例發佈），您需要編輯模板php文件並向樣式表添加一些樣式。

這是一個快速示例。

.blue-section, .grey-section { 
 
    display:block; 
 
    position:relative; 
 
    min-height:200px; 
 
    } 
 

 
.blue-section { 
 
    background-color:blue; 
 
    } 
 

 
.grey-section { 
 
    background-color:#888; 
 
    } 
 

 
.triangle { 
 
    position:absolute; 
 
    bottom:-20px; 
 
    z-index:10; 
 
    left:50%; 
 
    transform: translate(-20px,0); 
 
\t width: 0; 
 
\t height: 0; 
 
\t border-left: 20px solid transparent; 
 
\t border-right: 20px solid transparent; 
 
\t 
 
\t border-top: 20px solid blue; 
 
}

<div class="blue-section"> 
 
    test 
 
    <div class="triangle"></div> 
 
    
 
</div> 
 

 
<div class="grey-section"> 
 

 
    test 
 
</div>