Bagaimanakah Saya Boleh Mencipta Butang Heksagon Memanjang dengan Anak Panah Menggunakan Hanya Satu Elemen HTML?

Mencipta Butang Berbentuk Heksagon Memanjang dengan Elemen HTML Tunggal

Masalah:

Reka bentuk butang dengan bentuk heksagon memanjang, menampilkan anak panah pada kedua-dua hujungnya, menggunakan sahaja satu elemen HTML dan CSS.

Cabaran:

Menggunakan kedua-dua elemen :before dan :after akan menghasilkan dua anak panah pada satu sisi, memerlukan elemen tambahan. Selain itu, penjajaran dan saiz anak panah adalah bermasalah.

Penyelesaian dengan Elemen Tunggal:

Untuk menangani cabaran ini, pendekatan alternatif telah muncul yang menggunakan dua elemen pseudo dalam bujang elemen:

1. Unsur Pseudo: Elemen :sebelum dan :selepas, kedua-duanya separuh saiz butang utama, membentuk bahagian atas dan bawah bentuk.
2. Kedudukan: Elemen :before diletakkan di bahagian atas dengan perspektif dan putaran untuk mencapai kesan bersudut. Elemen :after diletakkan di bawah dan diputar untuk mencipta sudut bertentangan.
3. Manipulasi Sempadan: Dengan mengalihkan sempadan pada titik tertentu, rupa heksagon tercipta, dengan anak panah memanjang pada kedua-dua hujungnya.

Contoh Kod:

.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  ...

  .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;
  }
  .button.border:after {
    border-top: none;
  }

  /* Button hover styles */

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

Dengan pendekatan ini, butang berbentuk heksagon yang memanjang boleh dibuat menggunakan hanya satu elemen HTML dan CSS, tanpa memerlukan elemen tambahan.

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