Bolehkah Elemen CSS Tunggal Mencipta Butang Heksagon Memanjang?

Buat Butang Heksagon Memanjang dengan CSS (Penyelesaian Elemen Tunggal)

Dalam bidang reka bentuk butang, bentuk heksagon memanjang sering menarik perhatian . Walaupun biasanya dicapai menggunakan berbilang elemen, adakah mungkin untuk mencipta butang sedemikian menggunakan hanya satu?

Jawapannya ialah ya! Berikut ialah penyelesaian kreatif untuk mencapai reka bentuk unik ini:

Membina Bentuk Asas

1. Gunakan dua unsur pseudo (:sebelum dan :selepas) dengan saiz kira-kira separuh daripada elemen butang utama.
2. Tetapkan ketinggian yang berbeza untuk elemen pseudo untuk mencipta garisan senget.

Mencapai Kesan Kecondongan

1. Ubah elemen :before menggunakan perspektif dan rotateX untuk mencipta kesan senget. Putar ke hadapan sedikit.
2. Gunakan transformasi yang serupa pada elemen :selepas, tetapi putar ke arah belakang sedikit.

Letakkan Elemen

1. Letakkan elemen :sebelum dan :selepas bersebelahan antara satu sama lain, buat satu bentuk.
2. Gunakan kedudukan mutlak untuk melaraskan penjajarannya.

Menekankan dengan Sempadan dan Warna

1. Tambahkan jidar pada kedua-dua pseudo -elemen untuk bentuk yang ditentukan.
2. Gunakan warna yang sesuai untuk meningkatkan lagi penampilan.

Kesan Interaktif (Pilihan)

1. Gaya butang utama dan elemen pseudo dengan peralihan tuding untuk menambah gelagat interaktif.
2. Sesuaikan warna dan kesan sebagai dikehendaki.

Contoh Kod

/* General Button Style */

.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;
}

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

Dengan memanfaatkan pendekatan yang bijak ini, anda boleh mencipta butang heksagon memanjang yang menawan dengan hanya satu elemen. Teknik ini menambahkan sentuhan keanggunan dan keunikan pada mana-mana antara muka pengguna.

Atas ialah kandungan terperinci Bolehkah Elemen CSS Tunggal Mencipta Butang Heksagon Memanjang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!