Comment puis-je créer une bordure arrondie avec des extrémités incurvées en utilisant CSS et SVG ?

Création d'une bordure incurvée avec des extrémités arrondies à l'aide de CSS et SVG

Lors de la création d'un site Web, il est courant de rencontrer des détails de conception qui nécessitent des solutions créatives . L'un de ces détails est la création d'une bordure ronde avec des extrémités incurvées.

Problème :
Un concepteur de sites Web a du mal à obtenir une bordure ronde avec des extrémités incurvées à l'aide de CSS. Ils ont essayé d'y parvenir en utilisant des coins arrondis, mais cela ne produit pas la forme souhaitée.

Solution :
Pour créer une bordure incurvée avec des extrémités arrondies, nous pouvons utiliser Scalable Vector Graphiques (SVG) comme arrière-plan. SVG permet la création de formes et de courbes personnalisées, offrant plus de flexibilité et de contrôle sur la conception.

Pour obtenir la forme souhaitée, nous créerons un élément SVG personnalisé qui ressemble à un demi-cercle en forme de croissant. Voici un exemple :

<svg xmlns='http://www.w3.org/2000/svg'
  viewBox='10 10 45 15'
  width='64' height='64'
  fill='#29a7e8'>
  <path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' />
</svg>

Ce SVG définit un chemin qui commence par une ligne horizontale, puis passe à une courbe descendante. En utilisant CSS, nous pouvons ensuite définir ce SVG comme arrière-plan de l'élément dont nous voulons avoir la bordure incurvée.

Voici le code CSS mis à jour :

.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' /></svg>") 0 0/100% 100% no-repeat;
  width: 60px;
  height: 60px;
  margin: 0 1rem;
}

En combinant la forme SVG personnalisée avec la propriété CSS background, nous pouvons créer une bordure ronde avec des extrémités incurvées qui imite le design souhaité.

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!