Comment puis-je créer une bordure incurvée avec une extrémité arrondie en utilisant CSS ?

Border Curve CSS : Création de bords incurvés avec des cercles

Dans la conception Web, il est souvent nécessaire de créer des bordures ou des bords incurvés pour améliorer l'esthétique d'une page. Un défi courant consiste à créer un cercle avec une extrémité incurvée, comme le montre l'image fournie.

Le défi : obtenir une bordure arrondie avec une extrémité incurvée

Réaliser le l'effet souhaité en CSS peut être délicat. L'utilisation du rayon de bordure uniquement donnera une forme semi-circulaire, et non une courbe avec une extrémité allongée.

La solution : utiliser SVG comme arrière-plan

Pour créer un bordure avec une extrémité incurvée en CSS, nous pouvons utiliser SVG (Scalable Vector Graphics). SVG nous permet de définir des formes complexes à l'aide du code XML.

Le Code :

.bottom-bar {
  background: #29a7e8;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;
  text-align: center;
}

.circle {
  display: inline-block;
  position: relative;
  top: -28px;
  border-radius: 100%;
  background: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewbox="10 10 45 15" width="64" height="64" fill="%2329a7e8"><path d="M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z"></path></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

Explication :

• Nous créons une classe conteneur .bottom-bar pour établir la couleur d'arrière-plan, le positionnement et la hauteur.
• Nous définissons une classe .circle pour représenter les cercles.
• Nous définissons top: -28px pour positionner les cercles légèrement au-dessus de la barre inférieure.
• La propriété background utilise un URI de données pour intégrer une image SVG comme l'arrière-plan. Le chemin SVG définit une forme avec une extrémité incurvée.
• Nous spécifions les dimensions et la marge horizontale des cercles.

Avantages de l'utilisation de SVG :

• Les SVG sont des graphiques vectoriels, ce qui signifie qu'ils sont indépendants de la résolution et peuvent évoluer sans perte qualité.
• Ils offrent une plus grande flexibilité dans la création de formes complexes par rapport aux propriétés CSS seules.
• Les SVG peuvent être facilement intégrés au code HTML et CSS.

En utilisant SVG comme arrière-plan, nous pouvons obtenir efficacement la bordure incurvée souhaitée avec des extrémités arrondies, améliorant ainsi l'attrait visuel de notre conception Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!