Bagaimana untuk Mencipta Butang Heksagon Memanjang dengan Anak Panah Hanya Menggunakan CSS?

Butang Berbentuk Heksagon Memanjang dengan Elemen Tunggal

Cabaran:

Matlamat kami adalah untuk mencipta heksagon memanjang- butang berbentuk hanya menggunakan CSS, tanpa bergantung pada elemen tambahan. Butang harus menampilkan sempadan seperti reben yang dilanjutkan dengan anak panah menghala ke luar pada kedua-dua belah pihak.

Penyelesaian 1 (Disediakan dalam Soalan):

Pendekatan ini menggunakan dua pseudo -elemen (::sebelum dan ::selepas) untuk mencipta sempadan reben. Walau bagaimanapun, ia menghasilkan asimetri dan pemusatan anak panah yang tidak betul.

Penyelesaian yang Diperbaiki:

Untuk memperhalusi reka bentuk dan menangani batasan, kami mencadangkan penyelesaian alternatif yang menggunakan CSS yang berbeza strategi:

Konsep:

Pendekatan ini memerlukan:

1. Menggunakan ::sebelum dan ::selepas unsur pseudo yang membentuk separuh daripada saiz elemen butang utama.
2. Letakkan elemen pseudo ini untuk membentuk bahagian atas dan bahagian bawah heksagon.
3. Menggunakan rotateX dengan perspektif untuk mencapai kesan kecondongan yang diingini.

Pelaksanaan:

/* General Button Style */

.button {
  /* Properties as before... */
}

/* Pseudo-elements */

.button:before,
.button:after {
  position: absolute;
  content: '';
  width: 300px;
  left: 0px;
  height: 34px;
  z-index: -1;
}

.button:before {
  /* Top half; adjust rotation here... */
}

.button:after {
  /* Bottom half; adjust rotation here... */
  top: 40px;
}

/* Button Border Style */

.button.border:before,
.button.border:after {
  /* Properties as before... */
}

/* Etc., omitted for brevity */

Penjelasan:

• The elemen pseudo diletakkan sepenuhnya dalam elemen butang utama.
• elemen pseudo atas diputar mengikut arah jam manakala bahagian bawah diputar mengikut lawan jam, memberikan rupa kecondongan.
• Sempadan digunakan kepada unsur pseudo, mencipta bentuk heksagon.
• Reka bentuk ini membolehkan penyesuaian penuh bentuk dan dimensi butang dengan melaraskan lebar dan ketinggian unsur pseudo, serta sifat transformasinya.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Butang Heksagon Memanjang dengan Anak Panah Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!