多個U形divs

我試圖獲得一些漂亮的U形divs。這是預期的結果（它必須好看和響應）：多個U形divs

這是我發現的頁腳（形狀也不是那麼好，因爲我想）解決方案：

footer:after { 
    content: ""; 
    display: block; 
    position: absolute; 
    border-radius: 0px 0px 50% 50%; 
    width: 100%; 
    height: 140px; 
    background-color: white; /* but if I choose a bg image for about us this solution is wrong */ 
    left: 0; 
    top: 0px; 
}

我將有多個部分類似於#about-us。你能提出一個很好的啓動解決方案嗎？請記住在品牌部分背景我有一個動畫，在頁腳的背景圖像。這就是爲什麼我不能在about-us中使用我用於footer的解決方案。這是一種讓我們用橢圓形切割這個div，並使此部分透明。

更新：我目前的標題/關於我們惱人的合併。添加一個灰色的形狀（內部標題或關於我們頂部）不是一個解決方案。

來源

2017-10-04 GhitaB

你可能會需要一個'夾path'如果你是顯示通過一個背景圖像上規劃。 –

@Paulie_D謝謝。我也會檢查這些解決方案：https://stackoverflow.com/questions/8503636/transparent-half-circle-cut-out-of-a-div似乎是相同的任務。 – GhitaB

.u-shape { 
    height: 120px; 
    right: -100px; 
    left: -100px; 
    z-index: 1000; 
    position: absolute; 
    margin: 0 auto; 
} 

.u-shape.top { 
    top: -120px; 
    background: radial-gradient(ellipse at 50% 0, transparent 69%, white 70%); 
} 

.u-shape.bottom { 
    top: 0; 
    background: radial-gradient(ellipse at 50% 0, white 69%, transparent 70%); 
}

用法：

<header>...</header> 
<div class="u-shape top"></div> 
<div id="about-us"></div> 
<div class="u-shape bottom"></div> 
<footer>...</footer>

有用： https://codepen.io/thebabydino/pen/wFvmA

來源

2017-10-04 18:04:55 GhitaB

多個U形divs

回答

相關問題