Rumah >hujung hadapan web >tutorial css >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
Mencapai Kesan Kecondongan
Letakkan Elemen
Menekankan dengan Sempadan dan Warna
Kesan Interaktif (Pilihan)
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!