Penciptaan Butang Heksagon Memanjang dengan Elemen Tunggal

Dalam pembangunan web, mencipta bentuk butang tersuai boleh menjadi satu cabaran, terutamanya apabila menggunakan CSS sahaja dan mengelakkan elemen HTML tambahan. Dilema biasa timbul apabila cuba membuat butang heksagon dengan kepala anak panah memanjang pada kedua-dua sisi.

Pendekatan Sedia Ada

Satu kaedah standard melibatkan penggunaan kedua-dua :sebelum dan :selepas pseudo -elemen untuk menjana anak panah tunggal pada satu sisi. Walau bagaimanapun, ini memerlukan kemasukan elemen span lain dalam pautan untuk mencipta anak panah pada bahagian bertentangan, merumitkan penyelesaian.

Pendekatan alternatif melibatkan mencipta sempadan awal reben dengan menggunakan :selepas dan :sebelum unsur pseudo dengan sudut senget sedikit. Walau bagaimanapun, kaedah ini selalunya mengakibatkan salah jajaran dan panjang kepala anak panah tidak sekata.

Penyelesaian Elemen Tunggal yang Diperbaiki

Berikut ialah pendekatan yang diperhalusi yang menggunakan hanya satu elemen untuk mencapai heksagon yang diingini butang bentuk:

Kod:

HTML:

<a href="#" class="button ribbon-outset border">Click me!</a>

CSS:

.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #e04e5e;
  margin: 40px auto;
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

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

.button:before {
  transform: perspective(15px) rotateX(3deg);
}
.button:after {
  top: 40px;
  transform: perspective(15px) rotateX(-3deg);
}

/* Button Border Style */

.button.border:before,
.button.border:after {
  border: 4px solid #e04e5e;
}
.button.border:before {
  border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */
}
.button.border:after {
  border-top: none; /* to prevent the border-line showing up in the middle of the shape */
}

/* Button hover styles */

.button.border:hover:before,
.button.border:hover:after {
  background: #e04e5e;
}
.button.border:hover {
  color: #fff;
}

Penjelasan:

• Dua unsur pseudo (:sebelum dan :selepas) digunakan, setiap satu dengan ketinggian 34px (termasuk sempadan) dan lebar 300px (lebar butang).
• Separuh bahagian atas bentuk dibuat dengan menaikkan :before elemen sedikit menggunakan rotateX(3deg).
• Separuh bahagian bawah dibentuk oleh elemen :selepas, yang dinaikkan dengan rotateX(-3deg) dan diimbangi sebanyak 40px untuk menjajarkan dengan tepi atas butang.
• Kedua-dua elemen pseudo diberi offset kiri 0px dan indeks z -1 untuk memastikan ia bertindih dan mencipta bentuk heksagon.
• Gaya sempadan digunakan pada elemen butang untuk mencipta jidar nipis (dengan pepejal 4px #e04e5e) dan untuk menjadikan sempadan unsur pseudo tidak kelihatan (tiada untuk sempadan bawah dan atas).
• Semasa tuding, latar belakang unsur pseudo ditukar kepada #e04e5e dan warna teks butang menjadi putih.

Teknik ini berkesan mencipta butang berbentuk heksagon memanjang menggunakan hanya CSS dan satu elemen HTML, menyediakan penyelesaian yang bersih dan ringkas kepada cabaran reka bentuk.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Butang Heksagon Memanjang Menggunakan Hanya Satu Elemen HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!