ผมเชื่อหลายคนคงเคยลองทำแหลมๆให้เมนูเมื่อกด dropdown ลงมาแต่ทำยังไงก็ทำไม่ได้สักทีไม่รุ้ยังไงเนื่องจากว่าต่อใส่
css ให้ before ก่อนนั่นเอง อ่าวและ before คืออะไรล่ะ ความหมายตรงตัวเลยคือก่อนหน้าเลยครับคือก่อนหน้า class ของเรานั่นเอง ทีนี้เราก็แค่ประยุคใช้ทำเส้นขอบก่อนหน้า class เราทีนี้ก็จะได้แหลมๆตรงเมนูแล้วครับ
แบบนี้ทำที่หลายๆคนกำลังประสบปัญหา
- Workspace 1_242.png (33.87 KiB) Viewed 999 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 999 times
เพียงเท่านี้เพื่อนๆก็จะได้แหลมๆแล้วลองไปประยุคใช้กันดูนะครับ บายยย
ผมเชื่อหลายคนคงเคยลองทำแหลมๆให้เมนูเมื่อกด dropdown ลงมาแต่ทำยังไงก็ทำไม่ได้สักทีไม่รุ้ยังไงเนื่องจากว่าต่อใส่ [b][url=https://www.mindphp.com/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B8%AD%E0%B8%AD%E0%B8%99%E0%B9%84%E0%B8%A5%E0%B8%99%E0%B9%8C/%E0%B8%9A%E0%B8%97%E0%B9%80%E0%B8%A3%E0%B8%B5%E0%B8%A2%E0%B8%99-css.html]css[/url][/b] ให้ before ก่อนนั่นเอง อ่าวและ before คืออะไรล่ะ ความหมายตรงตัวเลยคือก่อนหน้าเลยครับคือก่อนหน้า class ของเรานั่นเอง ทีนี้เราก็แค่ประยุคใช้ทำเส้นขอบก่อนหน้า class เราทีนี้ก็จะได้แหลมๆตรงเมนูแล้วครับ
แบบนี้ทำที่หลายๆคนกำลังประสบปัญหา
[attachment=1]Workspace 1_242.png[/attachment]
ให้เพื่อนใส่ css ตามนี้ครับให้กับ class befor ที่เราต้องการให้มีแหลมๆออกมา
[code]
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: '';[/code]
ผลลัพธ์
[attachment=0]Workspace 1_243.png[/attachment]
เพียงเท่านี้เพื่อนๆก็จะได้แหลมๆแล้วลองไปประยุคใช้กันดูนะครับ บายยย