How can I create a concave bottom border in CSS?

Question

Content needs to be able to scroll behind it in the concave area and not be obscured. Specifically, I'm trying to create this:

Answer 1

For a transparent background, you can use box-shadows :

DEMO

Explanation :

The point of this technique is to use a pseudo element with box-shadows and a transparent backcground to see through it. The pseudo element is abolutely positioned and has a much larger width than the container in order to (with the help of border radius) give a smooth inset curve to the bottom of the div.

To make it simple : The background of the div is the box-shadow of the pseudo element.

The z-index values allow the content of the div to be dispayed over the shadow.

****** EDIT *************************

With content scolling behind the shape, you can see this DEMO

---

html,body{
    height:100%;
    margin:0;
    padding:0;
    background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
    background-size:cover;
}
div {
    background:none;
    height:50%;
    position:relative;
    overflow:hidden;
    z-index:1;
}
div:after {
    content:'';
    position:absolute;
    left:-600%;
    width:1300%;
    padding-bottom:1300%;
    top:80%;
    background:none;
    border-radius:50%;
    box-shadow: 0px 0px 0px 9999px teal;
    z-index:-1;
}

<div>content</div>

Answer 2

I don't know of a way you could do this with a border, but you could try using ::before in CSS3 combined with border-radius as shown in this demo.

#header {
    position: fixed;
    z-index: 1;
    height: 80px;
    background: #f00;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
#header::before {
    content: "";
    position: absolute;
    background: #fff;
    bottom: -22px;
    height: 30px;    
    left: -50px;
    right: -50px;
    border-radius: 50%;
}
#content {
    padding: 20px;
    position: absolute;
    z-index: 1;
    top: 80px;
    left: 0;
    width: 460px;
}

<div id="header">Header</div>
<div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 3

You should have a look at using the CSS clipping / masking techniques for your purpose.

Specifically, you can specify the boundaries you want to achieve by some SVG definitions:

<svg>
  <defs>
    <mask id="masking">
      <!-- white area means: visible -->
      <rect width="300" height="300" fill="white"/>

      <!-- black area means: hidden -->
      <ellipse rx="150" ry="10" cx="150" cy="300" fill="black" />
    </mask>
  </defs>
</svg>

And refer to this mask within CSS using:

#your-div {

    mask: url('#masking');
}

I have created a little example that demonstrates this in the following fiddle. This still has to be tweaked a bit in order to be more flexible when it comes to different dimensions, but it should light you the way: http://jsfiddle.net/m8fo5zbk/

UPDATE: Following fiddle also shows scrolling behavior http://jsfiddle.net/m8fo5zbk/2/ - did I understand correctly what you intended?

2nd UPDATE: Now understood that content should be placed inside of the div, reflected in this demo: http://jsfiddle.net/m8fo5zbk/3/

Answer 4

I tested a way to achieve that using border-top of a pseudo element (here, :after) : http://jsfiddle.net/z6eqvnxw/

.test {
    width: 300px;
    height: 300px;
    background: blue;
    position: relative;

}
.test:after {
    display: block;
    content: "";
    position: absolute;
    width: 100%;
    height: 25px;
    border-top: blue 10px solid;
    bottom: -23px;
    left: 0;
    border-radius: 40%;
}

That's not perfect, the render isn't great.

Is using Javascript / Canvas an option ? Or only CSS ?

Answer 5

Not sure what you require, is this what you require?

Quick Demo

html

 <div class="Fixed1"></div>
 <div class="scroll1">
 <p>DEMO CONTENT</p>
 </div>

CSS

.Fixed1 {
    color: #666;
    height: 200px;
    width: 100%;
    background-color: #06C;
    position: fixed;
    margin-top:40px;
}
.scroll1 {
    color: #333;
    height: 1000px;
    width: 720px;
    margin-right: auto;
    margin-left: auto;
    padding-left:50px;
    margin-top:110px;
    background-color: #CCC;
}