คุณสามารถดูกล่องด้วยลูกศรดังที่แสดงในภาพด้านบน ลูกศรนี้สามารถรับรู้ได้ผ่านภาพพื้นหลังหรือ CSS บทความนี้แนะนำกล่องพรอมต์สามกล่องด้วยลูกศรผ่าน CSS
1. ผ่านแอตทริบิวต์ชายแดน
ความคิด: สองสามเหลี่ยมสองรูปสามเหลี่ยมทั้งสองนั้นแตกต่างจาก 1px เป็นชายแดนโดยการวางตำแหน่ง
2.CSS3 แปลง
ความคิด: ก่อนอื่นทำสแควร์ที่มีสีเดียวกันทั้งสองด้านแล้วหมุนไปยังมุมที่แน่นอนเพื่อให้เป็นรูปสามเหลี่ยม
3. อักขระพิเศษ '♦'
ความคิด: ครึ่งแรกของตัวละครพิเศษรั่วไหลออกมาและดูเหมือนว่าสามเหลี่ยม
1. ผ่านแอตทริบิวต์ชายแดน:
ก่อนอื่นให้ทำ div ที่มีทั้งความกว้างและความสูง 10px และชายแดนก็คือ 10px
ความกว้าง: 10px; ความสูง: 10px; ชายแดน: 10px ของแข็ง; สีขอบสี: สีเขียวสีเขียวสีเหลืองสีน้ำเงิน;
ดังที่แสดงในรูปด้านล่าง:
ช่องว่างตรงกลางของภาพคือความกว้างและความสูงที่เราตั้งไว้ หากตั้งค่าเป็น 0PX จะเกิดอะไรขึ้น? ดังที่แสดงด้านล่าง:
ในเวลานี้เราสามารถตั้งค่าสีของเส้นขอบด้านซ้ายและเส้นขอบล่างให้โปร่งใสหรือมีสีเดียวกับสีพื้นหลังและสามเหลี่ยมที่เราต้องการจะออกมา ดังที่แสดงในรูปด้านล่าง:
ตอนนี้เรามาบรรลุผลกระทบกับภาพแรก:
CSS:
.info {margin-top: 50px; ตำแหน่ง: ญาติ; ความกว้าง: 200px; ความสูง: 50px; ความสูงของสาย: 60px; ความเป็นมา:#F6F1B3; Box-Shadow: 1px 2px 3px #E9D985; ชายแดน: 1px Solid #DACE7C; แนวชายแดน: 4px; TEXT-ALIGN: CENTER; สี: สีแดง; } .nav {ตำแหน่ง: สัมบูรณ์; ซ้าย: 30px; ล้น: ซ่อน; ความกว้าง: 0; ความสูง: 0; ความกว้างของชายแดน: 10px; สไตล์ชายแดน: ประประประตม } .nav-border {top: -20px; สีชายแดน: โปร่งใสโปร่งใส #DACE7C โปร่งใส; } .nav-background {top: -19px; สีชายแดน: โปร่งใสโปร่งใส #F6F1B3 โปร่งใส; -html:
<div> <pan> ข้อความพรอมต์ </span> <div> </div> <div> </div> </div>
2. การแปลง CSS3
ก่อนอื่นเราทำกล่อง div ที่มีสองเส้นขอบที่อยู่ติดกันที่มีสีเดียวกันและอีกสองเส้นขอบด้วย 0px ดังที่แสดงในภาพ:
หมุนกล่องโดย 45 องศาเพื่อให้ได้เอฟเฟกต์ที่รวดเร็วสามเหลี่ยม
CSS:
.info {margin-top: 50px; ตำแหน่ง: ญาติ; ความกว้าง: 200px; ความสูง: 50px; ความสูงของสาย: 60px; ความเป็นมา:#F6F1B3; Box-Shadow: 1px 2px 3px #E9D985; ชายแดน: 1px Solid #DACE7C; แนวชายแดน: 4px; TEXT-ALIGN: CENTER; สี: สีแดง; } .nav {ตำแหน่ง: สัมบูรณ์; ด้านบน: -8px; ซ้าย: 30px; ล้น: ซ่อน; ความกว้าง: 13px; ความสูง: 13px; ความเป็นมา:#F6F1B3; ชายแดนซ้าย: 1px solid #dace7c; ชายแดนด้านบน: 1px Solid #DACE7C; -webkit-transform: หมุน (45deg); -moz-transform: หมุน (45deg); -O-Transform: หมุน (45DEG); แปลง: หมุน (45deg); -html:
<div> <pan> ข้อความพรอมต์ </span> <div> </div> </div>
3. อักขระพิเศษ '♦'
'♦' เป็นตัวละครพิเศษซึ่งเทียบเท่ากับตัวละครดังนั้นขนาดจะถูกตั้งค่าผ่านขนาดตัวอักษรเพื่อให้ได้ผลของภาพแรก:
CSS:
.info {margin-top: 50px; ตำแหน่ง: ญาติ; ความกว้าง: 200px; ความสูง: 50px; ความสูงของสาย: 60px; ความเป็นมา:#F6F1B3; Box-Shadow: 1px 2px 3px #E9D985; ชายแดน: 1px Solid #DACE7C; แนวชายแดน: 4px; TEXT-ALIGN: CENTER; สี: สีแดง; } .nav {ตำแหน่ง: สัมบูรณ์; ซ้าย: 30px; ล้น: ซ่อน; ความกว้าง: 24px; ความสูง: 24px; แบบอักษร: ปกติ 24px "Microsoft Yahei"; } .nav-Border {top: -17px; สี:#dace7c; } .nav-background {top: -16px; สี:#f6f1b3; -html:
<div> <span> ข้อความพรอมต์ </span> <div> ♦ </div> <div> ♦ </div> </div>
ด้านล่างเป็นตัวอย่างที่เข้ากันได้กับ IE5.5+, Chrome, Firfox และเบราว์เซอร์อื่น ๆ หากคุณใช้งานคุณสามารถทำการสอบไปยังโครงการของคุณเองได้โดยตรง
<! doctype html> <html> <head> <title> </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <style> div.container {ตำแหน่ง: สัมบูรณ์; ด้านบน: 30px; ซ้าย: 40px; ขนาดฟอนต์: 9pt; แสดง: บล็อก; ความสูง: 100px; ความกว้าง: 200px; พื้นหลังสี: โปร่งใส; *ชายแดน: 1px Solid #666; } s {ตำแหน่ง: สัมบูรณ์; ด้านบน: -20px; *ด้านบน: -22px; ซ้าย: 20px; แสดง: บล็อก; ความสูง: 0; ความกว้าง: 0; ขนาดตัวอักษร: 0; ความสูงบรรทัด: 0; สีชายแดน: โปร่งใสโปร่งใส #666 โปร่งใส; สไตล์ชายแดน: ประประประิ ความกว้างของชายแดน: 10px; } i {ตำแหน่ง: สัมบูรณ์; ด้านบน: -9px; *ด้านบน: -9px; ซ้าย: -10px; แสดง: บล็อก; ความสูง: 0; ความกว้าง: 0; ขนาดตัวอักษร: 0; ความสูงบรรทัด: 0; สีชายแดน: โปร่งใสโปร่งใส #FFF โปร่งใส; สไตล์ชายแดน: ประประประิ ความกว้างของชายแดน: 10px; } .Content {Border: 1px Solid #666; -moz-Border-Radius: 3px; -webkit-Border-Radius: 3px; ตำแหน่ง: สัมบูรณ์; พื้นหลังสี: #FFF; ความกว้าง: 100%; ความสูง: 100%; ช่องว่าง: 5px; *ด้านบน: -2px; *Border-Top: 1px Solid #666; *Border-Top: 1px Solid #666; *ชายแดนด้านบน: 1px ของแข็ง *ชายแดนซ้าย: ไม่มี; *ชายแดนขวา: ไม่มี; *ความสูง: 102px; Box-Shadow: 3px 3px 4px; -moz-box-shadow: 3px 3px 4px; -webkit-box-shadow: 3px 3px 4px; / * สำหรับ IE 5.5 - 7 */ ตัวกรอง: progid: dximagetransform.microsoft.shadow (ความแข็งแรง = 4, ทิศทาง = 135, color = '#999999'); / * สำหรับ IE 8 */ -ms -filter: "progid: dximagetransform.microsoft.shadow (ความแข็งแกร่ง = 4, ทิศทาง = 135, color = '#999999')"; } </style> </head> <body> <div> <div> <div> Hello World! </div> <s> <i> </i> </s> </div> </body> </html>ภาพการทำซ้ำ:
สรุป:
กล่องพรอมต์พร้อมลูกศรนำผลลัพธ์ที่ดีไปสู่การโต้ตอบของผู้ใช้ บทความนี้แนะนำสามวิธี หากคุณมีวิธีการอื่นใน @ME ฉันจะขอบคุณมาก หวังว่าบทความนี้จะช่วยคุณได้