Multiple U shapes divs

Question

I'm trying to obtain some nice U shapes divs. This is the expected result (it must look nice and be responsive):

This is the solution I found for footer (the shape is not so good as I want):

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;
}

I will have multiple sections similar to #about-us. Can you suggest a nice starting solution here? Please keep in mind in brand section background I have an animation, in footer a background image. This is why I can't use in about-us the solution I used for footer. It's kind of let's cut this div with an oval and make this section transparent.

UPDATE: My current header / about us annoying merge. Adding a gray shape (inside header or in top of about us) is not a solution.

You're probably going to need a `clip-path` if you are planning on a background image showing through. — Paulie_D, Oct 04 '17 at 10:28
@Paulie_D Thanks. I will check these solutions, too: https://stackoverflow.com/questions/8503636/transparent-half-circle-cut-out-of-a-div Seems to be the same task. — GhitaB, Oct 04 '17 at 11:54

GhitaB · Accepted Answer · 2017-10-05T06:44:18.437

.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%);
}

Usage:

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

Useful: https://codepen.io/thebabydino/pen/wFvmA

Multiple U shapes divs

1 Answers1