Empat cara mudah untuk melukis segi empat tepat di html

Artikel ini akan memperkenalkan empat kaedah asas untuk melukis bentuk di laman web: Menggunakan HTML dan CSS, menggunakan CSS sahaja, menggunakan SVG, dan menggunakan elemen kanvas HTML.

mata utama

Empat kaedah asas lukisan bentuk di laman web adalah: menggunakan HTML dan CSS, hanya menggunakan CSS, menggunakan SVG, dan menggunakan elemen kanvas HTML.
HTML dan CSS boleh digunakan untuk membuat bentuk mudah seperti segi empat tepat dan bulatan, sambil menggunakan CSS sahaja boleh membuat bentuk melalui elemen pseudo seperti
• atau ::before. SVG membolehkan mencipta bentuk yang lebih kompleks, manakala elemen kanvas HTML boleh digunakan untuk mencipta ciri grafik dan interaktif. ::after
Kaedah memilih bentuk lukisan dalam HTML bergantung kepada hasil yang diinginkan. HTML dan CSS adalah ideal untuk mencipta bekas kandungan dan unsur-unsur hiasan; Ciri -ciri, tetapi memerlukan pemahaman yang lebih mendalam tentang JavaScript.

Lukis segi empat tepat menggunakan html dan css

Membuat bentuk menggunakan HTML dan CSS sangat mudah. Kita boleh menggunakan elemen

untuk menetapkan lebar dan ketinggiannya, serta sempadan dan/atau warna latar: div

div {
  width: 500px;
  height: 200px;
  border: 10px solid #2196F3;
  background-color: #f7f7f7;
}

Contoh codepen berikut menunjukkan hasilnya.

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

Nota: Dalam contoh di atas, elemen berpusat menggunakan grid CSS. div

Sudah tentu kita juga boleh meletakkan kandungan dalam segi empat tepat. Sila cuba dalam contoh codepen di atas.

kita juga boleh menarik bentuk lain dengan bantuan atribut

, seperti bulatan: border-radius

div {
  width: 200px;
  height: 200px;
  border: 10px solid #f32177;
  background-color: #f7f7f7;
  border-radius: 50%;
}

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

kita juga boleh menarik elips:

div {
  width: 500px;
  height: 200px;
  border: 10px solid #f37f21;
  background-color: #f7f7f7;
  border-radius: 50%;
}

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

kita juga boleh mencuba lebih banyak bentuk yang aneh, seperti:

div {
  width: 200px;
  height: 200px;
  border: 10px solid #ed21f3;
  background-color: #f7f7f7;
  border-radius: 50% 25%;
}

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

Bacaan Lanjut:

Ketahui lebih lanjut mengenai penggunaan atribut
• . border-radius

Lukis segi empat tepat menggunakan CSS sahaja

Dalam contoh di atas, kami menggunakan elemen HTML untuk membuat bentuk. Sekarang mari kita gunakan CSS.

Untuk melakukan ini, kami akan menggunakan CSS

pseudo-element. (Kita juga boleh menggunakan ::before). ::after

Berikut adalah apa yang boleh kita lakukan:

body::before {
  content: '';
  width: 500px;
  height: 200px;
  border: 10px solid #21f348;
  background-color: #f7f7f7;
}

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

Kami mencipta elemen pseudo yang dilampirkan pada elemen

dan kemudian gaya seperti yang menghadap elemen di atas. Kami juga boleh menambah kandungan ke bentuk ini dengan meletakkan teks, imej, dan lain -lain antara petikan atribut div, seperti content. content: 'This is some content!'

Bacaan Lanjut:

• anda boleh mengetahui lebih lanjut mengenai ::before dan ::after dalam panduan pseudo-elemen CSS kami.

Lukis segi empat tepat menggunakan svg

SVG membolehkan kita membuat bentuk yang sangat kompleks dalam HTML. Berikut adalah contoh mudah bagaimana untuk membuat segi empat tepat:

div {
  width: 500px;
  height: 200px;
  border: 10px solid #2196F3;
  background-color: #f7f7f7;
}

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

Bacaan Lanjut:

• Ketahui lebih lanjut mengenai SVG.
• Anda boleh membaca lebih lanjut mengenai menggunakan SVG pada MDN.

Buat segi empat tepat menggunakan elemen kanvas HTML

kita juga boleh membuat bentuk menggunakan elemen kanvas HTML. Kami mula -mula membuat elemen kanvas di HTML dan menetapkan lebar dan ketinggian:

div {
  width: 200px;
  height: 200px;
  border: 10px solid #f32177;
  background-color: #f7f7f7;
  border-radius: 50%;
}

maka kami menambah JavaScript berikut:

div {
  width: 500px;
  height: 200px;
  border: 10px solid #f37f21;
  background-color: #f7f7f7;
  border-radius: 50%;
}

Contoh codepen berikut menunjukkan hasilnya.

[codepen contoh pautan - sila ganti dengan pautan codepen sebenar]

Bacaan Lanjut:

• Baca tentang elemen kanvas pada MDN.
• Baca artikel kami di Canvas vs SVG.

Ringkasan

Dalam artikel ini, kami memperkenalkan empat cara mudah untuk menarik bentuk dalam HTML. Kaedah mana yang harus kita gunakan bergantung pada apa yang ingin kita capai.

Lukisan bentuk dalam HTML dan gaya mereka menggunakan CSS sangat biasa dan ideal apabila membuat bekas kandungan untuk halaman HTML. Unsur -unsur gaya ini juga boleh digunakan untuk tujuan hiasan. (Semak Codepen untuk beribu -ribu cara kreatif untuk membuat karya seni yang menakjubkan menggunakan HTML dan CSS.)

Membuat bentuk menggunakan elemen pseudo CSS sangat mudah untuk menambahkan pengubahsuaian hiasan dan tooltip ke laman web.

SVG adalah alat yang sangat baik untuk mencipta bentuk ringan dan responsif untuk laman web. Kod SVG boleh tertanam di halaman HTML kami, atau kami boleh menghubungkan ke fail SVG seperti imej yang dipautkan dan membenamkannya ke dalam halaman dengan cara ini.

Elemen

<canvas></canvas> adalah platform yang kuat yang boleh digunakan untuk membuat pelbagai grafik dan ciri interaktif lain di laman web, tetapi biasanya memerlukan pemahaman yang cukup mendalam tentang JavaScript.

Akhirnya, jika anda ingin mengambil penciptaan bentuk dalam HTML ke peringkat seterusnya, anda juga boleh menyemak contoh -contoh indah berikut menggunakan CSS clip-path:

• memperkenalkan sifat CSS clip-path dan tunjukkan cara menghidupkan bentuk.
• Buat potret bersuara menggunakan fungsi CSS path(), menunjukkan cara menggunakan clip-path dengan SVG.

Soalan Lazim mengenai Cara Melukis Rectangles Dalam Html

(bahagian FAQ yang disebutkan dalam teks asal harus ditambah di sini, dan kandungannya harus ditulis semula dengan keaslian asal pseudo untuk memastikan niat asal tidak berubah)

Sila ambil perhatian bahawa kerana pautan codepen tidak dapat diakses, saya menggantikan pautan dengan pemegang tempat. Sila gantikannya dengan pautan codepen sebenar.

Atas ialah kandungan terperinci Empat cara mudah untuk melukis segi empat tepat di html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!