Bagaimanakah Saya Boleh Mencipta Corak Heksagon Berulang Menggunakan Hanya CSS3?

Jana Corak Heksagon Berulang dengan CSS3

Heksagon ialah bentuk biasa yang digunakan dalam reka bentuk dan boleh menambah elemen unik dan menarik secara visual pada web muka surat. Walaupun imej boleh digunakan untuk mencipta heksagon, CSS3 juga boleh digunakan untuk mencipta corak heksagon berulang.

Mencipta Heksagon Asas

Langkah pertama ialah untuk cipta bentuk heksagon asas menggunakan CSS. Ini boleh dilakukan dengan gabungan sempadan dan unsur pseudo. Kod CSS berikut akan mencipta heksagon dengan sempadan hitam dan latar belakang putih:

.hexagon {
  width: 100px;
  height: 86.6px;
  border: 1px solid black;
  background-color: white;
  position: relative;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  border: 1px solid black;
  background-color: white;
  width: 50px;
  height: 50px;
}

.hexagon:before {
  left: -50px;
  top: 0;
  transform: rotate(60deg);
}

.hexagon:after {
  right: -50px;
  bottom: 0;
  transform: rotate(-60deg);
}

Mengulang Corak

Setelah heksagon asas dicipta, corak boleh diulang dengan menggunakan pemilih anak ke-n. Kod CSS berikut akan mengulangi corak heksagon dalam baris mendatar:

.hexagon-row {
  display: flex;
  flex-direction: row;
}

.hexagon-row .hexagon {
  margin: 0 10px;
}

Menyesuaikan Corak

Corak heksagon boleh disesuaikan untuk memenuhi keperluan khusus anda. Contohnya, anda boleh menukar saiz heksagon, warna jidar atau warna latar belakang. Anda juga boleh menambah imej atau teks pada heksagon.

Kesimpulan

Menggunakan CSS3, adalah mudah untuk mencipta corak heksagon berulang. Corak ini boleh digunakan untuk menambah elemen yang unik dan menarik secara visual pada halaman web. Eksperimen dengan pilihan penyesuaian yang berbeza untuk mencipta corak yang sesuai dengan keperluan anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Corak Heksagon Berulang Menggunakan Hanya CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!