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

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

Mary-Kate Olsen
Libérer: 2024-11-30 20:03:12
original
360 Les gens l'ont consulté

How Can I Create a Rounded Border with Curved Ends Using CSS and 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>
Copier après la connexion

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;
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal