Bagaimanakah Saya Boleh Mencipta Butang Heksagon Memanjang Menggunakan Hanya Satu Elemen HTML dan CSS?

Mencipta Butang Berbentuk Heksagon Memanjang dengan Hanya Satu Elemen

Masalah:

Boleh anda mencipta butang berbentuk heksagon menggunakan HTML dan CSS semata-mata tanpa menggunakan berbilang elemen?

Mungkin Penyelesaian:

Di bawah ialah kaedah alternatif untuk mencapai kesan ini hanya menggunakan satu elemen:

1. Gunakan Elemen Pseudo: Gunakan elemen pseudo :sebelum dan :selepas yang meniru separuh saiz butang utama, termasuk sempadan.
2. Tentukan Separuh Bentuk: Elemen :sebelum membentuk separuh atas bentuk, manakala :selepas membentuk separuh bawah. Setiap satu mempunyai ketinggian tertentu dan susunan sempadan untuk menyerupai heksagon.
3. Skew dan Kedudukan: RotateX dengan perspektif digunakan untuk mencondongkan elemen pseudo dan meletakkannya dengan betul untuk membentuk bentuk butang keseluruhan .

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 {
  border: 4px solid #e04e5e;
}

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

.button.border:hover {
  color: #fff;
}

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

Nota: Untuk menggunakan awalan penyemak imbas, sertakan modenizr atau awalan.

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!