web-dev-qa-db-fra.com

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

Donc, je travaille sur un site et je me demandais s'il était possible, en utilisant uniquement HTML5, CSS3 (et JavaScript si nécessaire), de créer une division avec un fond incurvé, de sorte qu'elle ressemblera pratiquement à ceci:

 enter image description here

Ou est-ce que cela peut seulement être fait en utilisant une image de fond?

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

CSS:

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

voir est-ce que ça va pour vous: DEMO

21
Aravind30790

Différentes approches peuvent être adoptées pour créer cette forme. Vous trouverez ci-dessous une description détaillée des possibilités:

Approches basées sur SVG:

SVG est la méthode recommandée pour créer de telles formes. Il offre simplicité et évolutivité. Voici quelques manières possibles:

1- Utilisation de l'élément de chemin:

Nous pouvons utiliser l'élément SVG de path pour créer cette forme et la remplir d'une couleur unie, d'un dégradé ou d'un motif.

Un seul attribut d est utilisé pour définir des formes dans l'élément path. Cet attribut lui-même contient un certain nombre de commandes courtes et quelques paramètres nécessaires au bon fonctionnement de ces commandes.

Ci-dessous le code nécessaire pour créer cette forme:

<path d="M 0,0
         L 0,40
         Q 250,80 500,40
         L 500,0
         Z" />

Vous trouverez ci-dessous une brève description des commandes path utilisées dans le code ci-dessus:

  • La commande M permet de définir le point de départ. Il apparaît au début et spécifie le point à partir duquel le dessin doit commencer.
  • La commande L est utilisée pour tracer des lignes droites.
  • La commande Q est utilisée pour dessiner des courbes.
  • La commande Z est utilisée pour fermer le chemin actuel.

Image de sortie:

 Div element with curved bottom

_ {Démo de travail:} _

svg {
  width: 100%;
}
<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
  <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" fill="black" />
</svg>

2- Coupure:

Couper signifie enlever ou cacher certaines parties d'un élément.

Dans cette approche, nous définissons une région de découpage à l'aide de l'élément clipPath de SVG et l'appliquons à un élément rectangulaire. Toute zone située en dehors de la zone de découpage sera masquée.

Ci-dessous le code nécessaire:

<defs>
    <clipPath id="shape">
        <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
    </clipPath>
</defs>
<rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />

Vous trouverez ci-dessous une brève description des éléments utilisés dans le code ci-dessus:

  • defs element est utilisé pour définir un élément/des objets pour une utilisation ultérieure dans un document SVG.
  • L'élément clipPath est utilisé pour définir une région de découpage.
  • rect element est utilisé pour créer des rectangles.
  • L'attribut clip-path est utilisé pour lier le tracé de détourage créé précédemment.

_ {Démo de travail:} _

svg {
  width: 100%;
}
<svg width="500" height="80" viewBox="0 0 500 80" preserveAspectRatio="none">
  <defs>
    <clipPath id="shape">
      <path d="M0,0 L0,40 Q250,80 500,40 L500,0 Z" />
    </clipPath>
  </defs>
  <rect x="0" y="0" width="500" height="80" fill="#000" clip-path="url(#shape)" />
</svg>

Approches basées sur CSS:

1- Utilisation du pseudo-élément:

Nous pouvons utiliser le pseudo-élément ::before ou ::after pour créer cette forme. Les étapes pour créer ceci sont données ci-dessous:

  • Créez un calque avec ::before OR ::after pseudo-élément ayant une largeur et une hauteur supérieures à celles de son parent.
  • Ajoutez border-radius pour créer la forme arrondie.
  • Ajoutez overflow: hidden sur le parent pour masquer la partie inutile.

HTML requis:

Tout ce dont nous avons besoin est un seul élément div ayant éventuellement une classe telle que shape:

<div class="shape"></div>

_ {Démo de travail:} _

.shape {
  position: relative;
  overflow: hidden;
  height: 80px;
}

.shape::before {
  border-radius: 100%;
  position: absolute;
  background: black;
  right: -200px;
  left: -200px;
  top: -200px;
  content: '';
  bottom: 0;
}
<div class="shape"></div>

2- Gradient Radial:

Dans cette approche, nous utiliserons la fonction radial-gradient() de CSS3 pour dessiner cette forme sur l’élément en tant qu’arrière-plan. Cependant, cette approche ne produit pas une image très nette et peut comporter des angles irréguliers.

HTML requis:

Seul un élément div avec une classe sera requis, c.-à-d.

<div class="shape"></div>

CSS nécessaire:

.shape {
  background-image: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%);
}

_ {Démo de travail:} _

.shape {
  background: radial-gradient(120% 120px at 50% -30px, #000 75%, transparent 75%) no-repeat;
  height: 80px;
}
<div class="shape"></div>

Approches basées sur JavaScript:

Bien que cela ne soit pas nécessaire dans ce cas, mais par souci d'exhaustivité, j'ajoute également cette approche. Cela peut être utile dans certains cas aussi:

HTML5 Canvas:

Nous pouvons dessiner cette forme sur l'élément HTML5 Canvas à l'aide des fonctions de chemin d'accès:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(0, 40);
ctx.quadraticCurveTo(311, 80, 622, 40);
ctx.lineTo(622, 0);
ctx.fill();
<canvas id="canvas" width="622" height="80"></canvas>

Vous trouverez ci-dessous une brève description des méthodes utilisées dans le code ci-dessus:

  • beginPath() est utilisé pour créer un nouveau chemin. Une fois qu'un nouveau chemin est créé, les commandes de dessin futures sont dirigées vers le chemin.
  • moveTo(x, y) déplace le stylet aux coordonnées spécifiées par x et y.
  • lineTo(x, y) trace une ligne droite de la position actuelle du stylet au point spécifié par x et y.
  • quadraticCurveTo(cp1x, cp1y, x, y) trace une courbe de la position actuelle du stylet au point spécifié par x et y à l'aide du point de contrôle spécifié par cp1x et cp1y.
  • fill() remplit le chemin actuel en utilisant une règle d’enroulement différente de zéro ou pair-impair.

Ressources utiles:

18
Mohammad Usman

Voici ce que vous voulez:

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

jsFiddle demo

5
manish_s

Oui, vous pouvez le faire en CSS - élargissez votre division pour fixer les bords trop arrondis, puis positionnez-la à gauche pour compenser, le rayon inférieur de la bordure utilisant les valeurs x et y et la marge inférieure négative pour le trou:

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;)
1
Vision Hive

Essaye ça

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

Fichier jsFiddle

0
Roy Sonasish