ผมเชื่อหลายคนคงเคยลองทำแหลมๆให้เมนูเมื่อกด dropdown ลงมาแต่ทำยังไงก็ทำไม่ได้สักทีไม่รุ้ยังไงเนื่องจากว่าต่อใส่
css ให้ before ก่อนนั่นเอง อ่าวและ before คืออะไรล่ะ ความหมายตรงตัวเลยคือก่อนหน้าเลยครับคือก่อนหน้า class ของเรานั่นเอง ทีนี้เราก็แค่ประยุคใช้ทำเส้นขอบก่อนหน้า class เราทีนี้ก็จะได้แหลมๆตรงเมนูแล้วครับ
แบบนี้ทำที่หลายๆคนกำลังประสบปัญหา
- Workspace 1_242.png (33.87 KiB) Viewed 1025 times
ให้เพื่อนใส่ css ตามนี้ครับให้กับ class befor ที่เราต้องการให้มีแหลมๆออกมา
โค้ด: เลือกทั้งหมด
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: white;
content: '';
ผลลัพธ์
- Workspace 1_243.png (32.58 KiB) Viewed 1025 times
เพียงเท่านี้เพื่อนๆก็จะได้แหลมๆแล้วลองไปประยุคใช้กันดูนะครับ บายยย