Puis-je créer une div avec un fond incurvé?

Donc je suis en train de travailler sur un site et je me demandais si il est possible d', purement à l'aide de HTML5, CSS3 (et JavaScript si nécessaire), faire un div avec un fond courbe, donc à chercher pratiquement comme ceci:

Puis-je créer une div avec un fond incurvé?

Ou cela peut-il être effectué uniquement à l'aide d'une image d'arrière-plan?

<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
        <ul class="nav">
            <li><a href="#">Home</a></li>
        </ul>
        </div>
    </div>
</body>

source d'informationauteur ShiftyF97 | 2013-06-11

  1. 14

    CSS:

    div{
    background-color:black;
    width:500px;
    height:50px;
    border-bottom-left-radius:50%;
    border-bottom-right-radius:50%;
}

    voir est-ce ok pour vous : DÉMO

  2. 5

    C'est ce que vous voulez:

    div{
    background-color: black;
    width: 500px;
    height: 200px;
    border-radius: 0 0 50% 50% / 15%;
}

    jsFiddle démo

  3. 0

    Essayer cette

    .navbar{
    border-radius:50% 50% 0 0;
    -webkit-border-radius:50% 50% 0 0;
    background:#000;
    min-height:100px;
}

    jsFiddle Fichier

  4. 0

    Oui, vous pouvez le faire en CSS - en fait, rendre votre div plus large que la page afin de fixer le trop-bords arrondis, puis à gauche placé pour compenser, avec bordure en bas du rayon à l'aide de deux x & y les valeurs, et négatif de la marge du bas pour compenser l'écart:

    border-bottom-left-radius: 50% 200px; //across half & up 200px at left edge
border-bottom-right-radius: 50% 200px; //across half & up 200px at right edge
width: 160%; overflow: hidden; //make larger, hide side bits
margin-bottom: -50px; //apply negative margin to compensate for bottom gap
position: relative; left:-30%; //re-position whole element so extra is on each side (you may need to add display:block;)