Comment puis-je faire en sorte que le texte s'enroule autour d'une division arrondie ?

Amélioration d'un div arrondi pour contenir du texte

De nombreux projets nécessitent un div arrondi pour contenir du texte de manière transparente. Cependant, par défaut, les divs ronds laissent souvent le texte apparaître en forme de carré. CSS propose des solutions pour résoudre ce problème.

Shape-Outside : une approche moderne

La propriété shape-outside permet d'envelopper le contenu en ligne autour de formes non rectangulaires. Il permet aux concepteurs de personnaliser l'habillage, y compris autour d'objets et de cercles complexes. La prise en charge par le navigateur de la forme extérieure doit être envisagée.

Technique de dégradé et de pseudo-éléments

Une combinaison de dégradés radiaux et de pseudo-éléments peut créer une zone en forme de cercle qui repousse le texte. Commencez avec une boîte carrée et utilisez quatre pseudo-éléments flottants avec des dégradés radiaux dessinés à l'extérieur du centre du cercle. Ajustez les dégradés pour couvrir les zones nécessaires.

Par exemple, le code CSS et HTML suivant permet d'obtenir l'effet souhaité :

div {
  width: 10em;
  height: 10em;
  border-radius: 50%;
  background: #333;
}

div:before {
  content: '';
  float: left;
  clear: left;
  height: 5em;
  width: 5em;
  background: radial-gradient( circle at bottom right, transparent 69%, red 69%);
}

div:after {
  content: '';
  float: right;
  clear: right;
  height: 5em;
  width: 5em;
  background: radial-gradient( circle at bottom left, transparent 69%, red 69%);
}

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

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!