cercle débordant du conteneur

Question

J'essaie de faire l'effet sur l'image jointe. Un cercle déborde du conteneur avec CSS border-radius. C'est presque là mais pas encore juste.

Ce code est le plus proche que je peux l'obtenir.

body { 
 
    margin: 0; 
 
} 
 
.bg-border-radius { 
 
    margin: 0px; 
 
    width: 100%; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    border-radius: 0 0 100% 100%; 
 
    background-color: #0080C1; 
 
}

<div class="bg-border-radius"></div>

Comment puis-je obtenir plus près de ce qui est sur l'image avec CSS?

Answer 1

Enroulez le <div> dans un autre, appelons-le "wrapper"

<div class="wrapper"> 
    <div class="bg-border-radius"></div> 
</div> 

.wrapper 
{ 
    width: 100%; 
    overflow: hidden; 
} 

Vous pouvez maintenant arange le cercle comme vous, avec une plus grande largeur de 100%. Pour rendre le cercle sensible, définissez border-radius: 50%, height: auto; et padding-top: 150%; < - le même que width. Si vous déplacez le cercle margin-top: -120%; et margin-left: -25%; vous obtiendrez quelque chose comme ça http://jsfiddle.net/qcfo5688/

Answer 2

Augmenter la hauteur et d'utiliser une marge supérieure négative:

.bg-border-radius { 
    margin-top: -200px; 
    width: 100%; 
    height: 400px; 
    overflow: hidden; 
    border-radius: 0 0 100% 100%; 
    background-color: #0080C1; 
} 

Answer 3

probablement faire une largeur spécifique, puisque vous aurez besoin de lui donner une marge négative sur la gauche pour obtenir l'effet. Exemple: https://jsfiddle.net/kLm6a7ym/

.bg-border-radius { 
    margin-top: -200px; 
    margin-left: -110px; 
    width: 1385px; 
    height: 400px; 
    overflow: hidden; 
    border-radius: 0 0 100% 100%; 
    background-color: #0080C1; 
} 

Answer 4

Une autre approche consiste à utiliser un inline SVG. Dans l'exemple suivant, j'ai utilisé un élément de chemin avec un arc command:

svg { width: 100%; height: auto;}

<svg viewbox="0 0 100 50"> 
 
    <path fill="#0081C2" d="M0 0 H100 V10 A85 85 1 0 1 0 10z" /> 
 
</svg>