Come posso creare un bordo inferiore concavo in CSS?

Question

Il contenuto deve essere in grado di scorrere dietro di esso nell'area concava e non essere oscurato. In particolare, sto cercando di creare questa:

Answer 1

Per uno sfondo trasparente, è possibile utilizzare box-ombre:

DEMO

Spiegazione:

Il punto di questa tecnica è usare uno pseudo elemento con ombre di casella e un backcground trasparente per vedere attraverso di esso. Lo pseudo elemento è posizionato in modo sopito e ha una larghezza molto più grande del contenitore in modo da (con l'aiuto del raggio del bordo) dare una curva liscia all'interno del div.

Per semplificare: Lo sfondo del div è l'ombra del riquadro dello pseudo elemento.

I valori di z-index consentono di disperdere il contenuto del div sull'ombra.

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

Con scolling contenuti dietro la forma, si può vedere questo 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

non so di un modo si potrebbe fare questo con un bordo, ma si potrebbe provare a utilizzare ::before in CSS3 combinato con border-radius come mostrato in questo 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

ho testato un modo per ottenere che l'utilizzo di border-top di un elemento pseudo (qui,: dopo): 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%; 
} 

Questo non è perfetto, l'isn render' t fantastico.

utilizza un'opzione Javascript/Canvas? O solo CSS?

Answer 4

Non sei sicuro di cosa hai bisogno, è questo che ti serve?

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

Si dovrebbe avere uno sguardo utilizzando il ritaglio CSS/tecniche per mascherare il vostro scopo.

In particolare, è possibile specificare i limiti che si desidera raggiungere con alcune definizioni 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> 

e si riferiscono a questa maschera all'interno di CSS utilizzando:

#your-div { 

    mask: url('#masking'); 
} 

ho creato un piccolo esempio che lo dimostra nel seguente violino. Questo deve ancora essere ottimizzato per essere più flessibile quando si tratta di dimensioni diverse, ma dovrebbe illuminarti: http://jsfiddle.net/m8fo5zbk/

AGGIORNAMENTO: Seguendo il violino mostra anche il comportamento di scorrimento http://jsfiddle.net/m8fo5zbk/2/ - ho capito bene cosa tu? previsto?

2 ° UPDATE: Ora inteso che il contenuto deve essere collocato all'interno del div, che si riflette in questa demo: http://jsfiddle.net/m8fo5zbk/3/