Anda dapat melihat kotak dengan panah seperti yang ditunjukkan pada gambar di atas. Panah ini dapat direalisasikan melalui gambar latar belakang atau CSS. Artikel ini memperkenalkan tiga kotak prompt dengan panah melalui CSS.
1. Lulus atribut perbatasan
Ide: Dua segitiga, dua segitiga berbeda dari 1px sebagai perbatasan dengan memposisikan.
2.CSS3 Transform
Ide: Pertama buat persegi dengan warna yang sama di dua sisi, dan kemudian putar ke sudut tertentu untuk menjadikannya segitiga.
3. Karakter Khusus '♦'
Pikiran: Paruh pertama karakter khusus bocor, dan mereka terlihat seperti segitiga
1. Lulus atribut perbatasan:
Pertama mari kita buat div dengan lebar dan tinggi 10px, dan perbatasan juga 10px.
Lebar: 10px; Tinggi: 10px; Perbatasan: 10px padat; Color perbatasan: biru kuning hijau merah;
Seperti yang ditunjukkan pada gambar di bawah ini:
Kosong di tengah gambar adalah lebar dan tinggi yang kami atur. Jika diatur ke 0px, apa yang akan terjadi? , seperti yang ditunjukkan di bawah ini:
Pada saat ini, kita dapat mengatur warna perbatasan kiri dan bawah menjadi transparan atau warna yang sama dengan warna latar belakang, dan segitiga yang kita inginkan akan keluar. Seperti yang ditunjukkan pada gambar di bawah ini:
Sekarang mari kita mencapai efek pada gambar pertama:
CSS:
.info {margin-top: 50px; Posisi: kerabat; Lebar: 200px; Tinggi: 50px; Line-Height: 60px; Latar belakang:#f6f1b3; Kotak-Shadow: 1px 2px 3px #E9D985; Perbatasan: 1px solid #dace7c; Border-Radius: 4px; Teks-Align: tengah; Warna: Merah; } .nav {position: absolute; Kiri: 30px; meluap: tersembunyi; Lebar: 0; Tinggi: 0; Perbatasan-lebar: 10px; Gaya Perbatasan: Potongan solid putus-putus hancur; } .nav-border {top: -20px; Color perbatasan: transparan transparan #dace7c transparan; } .nav-background {top: -19px; Border-color: transparan transparan #f6f1b3 transparan; }html:
<div> <span> pesan cepat </span> <div> </div> <div> </div> </div>
2. CSS3 Transform
Kami pertama -tama membuat kotak div dengan dua perbatasan yang berdekatan dengan warna yang sama dan dua perbatasan lainnya dengan 0px. Seperti yang ditunjukkan pada gambar:
Putar kotak sebesar 45 derajat untuk mencapai efek prompt segitiga.
CSS:
.info {margin-top: 50px; Posisi: kerabat; Lebar: 200px; Tinggi: 50px; Line-Height: 60px; Latar belakang:#f6f1b3; Kotak-Shadow: 1px 2px 3px #E9D985; Perbatasan: 1px solid #dace7c; Border-Radius: 4px; Teks-Align: tengah; Warna: Merah; } .nav {position: absolute; Atas: -8px; Kiri: 30px; meluap: tersembunyi; Lebar: 13px; Tinggi: 13px; Latar belakang:#f6f1b3; Border-left: 1px solid #dace7c; Border-top: 1px solid #dace7c; -webkit-transform: rotate (45deg); -Moz-Transform: rotate (45deg); -o-transform: rotate (45deg); transformasi: rotate (45deg); }html:
<div> <span> Pesan cepat </span> <div> </div> </div>
3. Karakter Khusus '♦'
'♦' adalah karakter khusus, yang setara dengan karakter, sehingga ukurannya ditetapkan melalui ukuran font untuk mencapai efek gambar pertama:
CSS:
.info {margin-top: 50px; Posisi: kerabat; Lebar: 200px; Tinggi: 50px; Line-Height: 60px; Latar belakang:#f6f1b3; Kotak-Shadow: 1px 2px 3px #E9D985; Perbatasan: 1px solid #dace7c; Border-Radius: 4px; Teks-Align: tengah; Warna: Merah; } .nav {position: absolute; Kiri: 30px; meluap: tersembunyi; Lebar: 24px; Tinggi: 24px; Font: Normal 24px "Microsoft Yahei"; } .nav-border {top: -17px; Warna:#dace7c; } .nav-background {top: -16px; Warna:#F6F1B3; }html:
<div> <span> Pesan cepat </span> <div> ♦ </div> <div> ♦ </div> </div>
Di bawah ini adalah demo yang kompatibel dengan IE5.5+, Chrome, Firfox, dan browser lainnya. Jika Anda menggunakannya, Anda dapat secara langsung mengikuti ujian ke proyek Anda sendiri.
<! Doctype html> <html> <head> <itement> </itement> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <tyle> div.container {position: absolute; Atas: 30px; Kiri: 40px; Ukuran font: 9pt; Tampilan: Blok; Tinggi: 100px; Lebar: 200px; latar belakang-warna: transparan; *Border: 1px solid #666; } s {position: absolute; Atas: -20px; *TOP: -22px; Kiri: 20px; Tampilan: Blok; Tinggi: 0; Lebar: 0; Ukuran font: 0; Line-Height: 0; Color perbatasan: transparan transparan #666 transparan; Gaya Perbatasan: Paling pupar hancur; Perbatasan-lebar: 10px; } i {position: absolute; TOP: -9px; *TOP: -9px; Kiri: -10px; Tampilan: Blok; Tinggi: 0; Lebar: 0; Ukuran font: 0; Line-Height: 0; Color perbatasan: transparan transparan #FFF transparan; Gaya Perbatasan: Paling pupar hancur; Perbatasan-lebar: 10px; } .content {border: 1px solid #666; -Moz-border-radius: 3px; -webkit-border-radius: 3px; Posisi: Absolute; Latar Belakang-Color: #FFF; Lebar: 100%; Tinggi: 100%; padding: 5px; *TOP: -2px; *Border-Top: 1px Solid #666; *Border-Top: 1px Solid #666; *Border-top: 1px padat *Border-left: tidak ada; *Border-Right: tidak ada; *Tinggi: 102px; Kotak-Shadow: 3px 3px 4px; -Moz-box-shadow: 3px 3px 4px; -webkit-box-shadow: 3px 3px 4px; / * Untuk IE 5.5 - 7 */ Filter: Progid: dximagetransform.microsoft.shadow (kekuatan = 4, arah = 135, warna = '#999999'); / * Untuk IE 8 */ -MS -filter: "Progid: dximagetransform.microsoft.shadow (kekuatan = 4, arah = 135, color = '#999999')"; } </tyle> </head> <body> <div> <div> <div> hello world! </div> <s> <i> </i> </s> </div> </body> </html>Gambar reproduksi:
ringkasan:
Kotak prompt dengan panah membawa hasil yang baik untuk interaksi pengguna. Artikel ini memperkenalkan tiga metode. Jika Anda memiliki metode lain untuk @me, saya akan sangat berterima kasih. Semoga artikel ini dapat membantu Anda.