Comment puis-je connecter des divisions HTML avec des lignes en utilisant uniquement HTML et CSS ?

Connecter des divs HTML avec des lignes sans canevas

Connecter plusieurs divs HTML avec des lignes peut améliorer la représentation visuelle et la mise en page d'une page Web. Bien que l'utilisation d'un élément canevas soit une approche courante, il est également possible d'y parvenir uniquement en HTML et CSS.

Une méthode consiste à utiliser des lignes SVG (Scalable Vector Graphics). Les SVG permettent la création de graphiques vectoriels rendus à l'aide de code XML.

Code HTML :

Pour commencer, définissez les divs que vous souhaitez connecter :

<div>

Code de ligne SVG :

Créer une ligne SVG élément, en précisant les coordonnées qui relient les divs :

<svg width="svg width" height="svg height">
  <line x1="x-coordinate of div1 center" y1="y-coordinate of div1 center"
        x2="x-coordinate of div2 center" y2="y-coordinate of div2 center"
        stroke="line color"/>
</svg>

Par exemple, si vous souhaitez connecter les centres des divs définis ci-dessus, vous utiliserez le code suivant :

<svg width="500" height="500">
  <line x1="50" y1="50" x2="350" y2="350" stroke="black"/>
</svg>

CSS (facultatif) :

Vous pouvez utiliser CSS pour styliser la ligne, par exemple en définissant son épaisseur ou color :

svg line {
  stroke-width: 2px;
}

Avantages de l'utilisation des lignes SVG :

• Léger et efficace
• Nécessite uniquement HTML et CSS
• Permet un contrôle précis du positionnement de la ligne

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!