Header mit gebogenem Spitzboden

Question

Ich muss den blau/grünen Bereich erstellen, der in der folgenden Abbildung dargestellt ist. Es hat abgewinkelte Seiten, die bis zu einem Punkt abfallen, der eine leichte Krümmung aufweist.

Was ist der beste Weg dies zu erreichen mit CSS? Ich muss IE9 + oder IE10 + unterstützen, wenn IE9 Unterstützung nicht möglich ist.

Ich habe eine grundlegende gestartet demo here - (den Inhalt innerhalb des bläulich-grünen Bereich nicht benötigen Sie)

Answer 1

hier nur mit CSS mein Versuch ist:

.header { 
    background: #415d67; 
    height: 150px; 
    position: relative; 
    z-index: 1; 

} 
.header:after { 
    position: absolute; 
    content: ""; 
    background: #415d67; 
    width: 50%; 
    bottom: -20px; 
    right: 0; 
    height: 100%; 
    transform: skewY(-5deg); 
    transform-origin: right; 
    border-bottom-left-radius: 50px; 
    padding-right: 44px; 
    z-index: -1; 
} 
.header:before { 
    position: absolute; 
    content: ""; 
    background: #415d67; 
    width: 50%; 
    bottom: -20px; 
    left: 0; 
    height: 100%; 
    transform: skewY(5deg); 
    transform-origin: left; 
    border-bottom-right-radius: 50px; 
    padding-left: 44px; 
    z-index: -1; 
} 
.content { 
    background: white; 
    padding: 20px; 
    padding-top: 100px; 
} 

JSBIN demo

Sie können auch eine SVG-Grafik verwenden.

Answer 2

Ein anderer Ansatz wäre die Verwendung eines inline svg. Das folgende Beispiel verwendet ein path element mit einem Bezierkurve Befehl für die untere Kurve:

#header { 
 
    position: relative; 
 
    padding: 30px; 
 
    text-align: center; 
 
    color: #fff; 
 
} 
 
#header svg { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: -1; 
 
}

<div id="header"> 
 
    <svg viewbox="0 0 100 20" preserveAspectRatio="none"> 
 
    <path fill="#415D67" d="M0 0 H100 V10 L52.5 19.5 Q50 20 47.5 19.5 L0 10z" /> 
 
    </svg> 
 
    <p>Some content</p> 
 
</div> 
 
<p>some more content</p>

Answer 3

linear-Gradienten können sehr nützlich sein: http://codepen.io/gc-nomade/pen/reYWxd

.header { 
 
    background: linear-gradient(to bottom left, #415D67 50%, transparent 51%) bottom left no-repeat, linear-gradient(to bottom right, #415D67 50%, transparent 51%) bottom right no-repeat, linear-gradient(to left, #415D67, #415D67) top no-repeat; 
 
    background-size: 50.1% 30%, 50.1% 30%, 100% 70%; 
 
    height: 105px; 
 
    padding-bottom: 45px; 
 
    /* other makeup from here */ 
 
    display: flex; 
 
} 
 
h1 { 
 
    margin: auto; 
 
    color: turquoise; 
 
    text-shadow:0 0 white; 
 
} 
 
.content { 
 
    background: white; 
 
    padding: 0.25em 20px 20px; 
 
}

<div class="header"> 
 
    <h1>whatever stands here</h1> 
 
</div> 
 
<div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quia dicta fuga porro esse enim rem laudantium velit dolore doloremque. Esse, voluptatem, consequatur. Rem error unde esse. Architecto, ad, blanditiis. 
 
</div>