Как создать вогнутую нижнюю границу в CSS?

Question

Содержимое должно быть способно прокручиваться позади него в вогнутой области и не затуманиваться. В частности, я пытаюсь создать это:

Answer 1

Для прозрачного фона, вы можете использовать окно-тень:

DEMO

Объяснение:

Целью этой методики является использование псевдоэлемента с коробочными тенями и прозрачным обратным окном для его просмотра. Псевдоэлемент абсолютно расположен и имеет гораздо большую ширину, чем контейнер, чтобы (с помощью радиуса границы) дать гладкую кривую вставки в нижней части div.

Чтобы сделать его простым: Фон div - это тень окна псевдоэлемента.

Значения z-index позволяют содержимое div быть распределенным по тени.

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

С содержанием scolling позади формы, вы можете увидеть это 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

я не знаю так, как вы могли бы сделать это с границей, но вы можете попробовать использовать ::before в CSS3 в сочетании с border-radius, как показано в этом демо.

#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

Я тестировал способ добиться того, чтобы с помощью border-top псевдориманова элемента (здесь: после): 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%; 
} 

Это не идеально, рендер ISN» Отличный.

Использует Javascript/Canvas вариант? Или только CSS?

Answer 4

Не знаете, что вам нужно, это то, что вам нужно?

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

Answer 5

Вы должны взглянуть на использовании CSS вырезку/маскировки методы для вашей цели.

В частности, вы можете указать границы, которые вы хотите достичь с помощью некоторых определений SVG:

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

И обратитесь к этой маске в CSS с помощью:

#your-div { 

    mask: url('#masking'); 
} 

Я создал небольшой пример, демонстрирует это в следующей скрипке. Это по-прежнему должно быть изменено немного для того, чтобы быть более гибким, когда дело доходит до различных размеров, но она должна загореться вам путь: http://jsfiddle.net/m8fo5zbk/

UPDATE: Эта скрипка также показывает прокрутку поведения http://jsfiddle.net/m8fo5zbk/2/ - я правильно понимаю, что ты предназначена?

второго UPDATE: Теперь понятно, что контент должен быть помещен внутри в DIV, отражено в этой демонстрации: http://jsfiddle.net/m8fo5zbk/3/