Bagaimanakah Saya Boleh Menyambungkan Div HTML dengan Talian Hanya Menggunakan HTML dan CSS?

Menyambungkan Div HTML dengan Garisan tanpa Kanvas

Menyambungkan berbilang div HTML dengan garisan boleh meningkatkan perwakilan visual dan reka letak halaman web. Walaupun menggunakan elemen kanvas ialah pendekatan biasa, anda juga boleh mencapainya dalam HTML dan CSS sahaja.

Satu kaedah ialah menggunakan garisan SVG (Grafik Vektor Boleh Skala). SVG membenarkan penciptaan grafik berasaskan vektor yang dipaparkan menggunakan kod XML.

Kod HTML:

Untuk bermula, tentukan div yang anda ingin sambungkan:

<div>

Kod Talian SVG:

Buat Elemen baris SVG, menyatakan koordinat yang menyambungkan div:

<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>

Sebagai contoh, jika anda ingin menyambungkan pusat div yang ditakrifkan di atas, anda akan menggunakan kod berikut:

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

CSS (pilihan):

Anda boleh menggunakan CSS untuk menggayakan garisan, seperti menetapkan ketebalannya atau warna:

svg line {
  stroke-width: 2px;
}

Kelebihan Menggunakan Talian SVG:

• Ringan dan cekap
• Hanya memerlukan HTML dan CSS
• Membolehkan kawalan tepat ke atas kedudukan baris

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyambungkan Div HTML dengan Talian Hanya Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!