多个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

回答

相关问题