How can I create a concave bottom border in CSS?

问题

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

回答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>

回答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>

回答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/

回答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 ?

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

来源：https://stackoverflow.com/questions/25914363/how-can-i-create-a-concave-bottom-border-in-css

标签

css

css3

css-shapes