How to create concave bottom border in CSS?

Question

Content should be able to scroll behind it in a concave area and not hide. In particular, I am trying to create this:

Answer 1

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

Demo

Explanation:

The purpose of this technique is to use a pseudo-element with box shadows and a transparent back window to see it. The pseudo-element is completely located and has a much wider width than the container in order to (using the border radius) give a smooth insertion curve at the bottom of the div.

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

The z-index values ​​let you display the contents of a div in the shadow.

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

With the content that has accumulated behind the figure, you can see this DEMO

---

html,body{ height:100%; margin:0; padding:0; background: url('http://lorempixel.com/output/people-qc-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 how you could do this with a border, but you can try using ::before in CSS3 in combination 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 take a look at using CSS cropping / masking methods for your purpose.

In particular, you can specify the boundaries that you want to achieve using 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 link to this mask in CSS using:

 #your-div { mask: url('#masking'); } 

I created a small example demonstrating this in the following fiddle. It still needs to be tweaked a bit to be more flexible when it comes to different sizes, but it should light you up like this: http://jsfiddle.net/m8fo5zbk/

UPDATE: after the fiddle, the scrolling behavior of http://jsfiddle.net/m8fo5zbk/2/ is also displayed - did I understand correctly what you intended?

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

Answer 4

I checked the way to achieve this using the border-top pseudo border-top 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%; } 

This is not perfect, the render is small.

Does Javascript / Canvas use the option? Or just CSS?

Answer 5

Not sure what you need, is that what you need?

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