ทำแหลมๆข้างบน dropdown

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: ทำแหลมๆข้างบน dropdown

ทำแหลมๆข้างบน dropdown

โดย pond » 22/08/2016 7:29 pm

ผมเชื่อหลายคนคงเคยลองทำแหลมๆให้เมนูเมื่อกด dropdown ลงมาแต่ทำยังไงก็ทำไม่ได้สักทีไม่รุ้ยังไงเนื่องจากว่าต่อใส่ css ให้ before ก่อนนั่นเอง อ่าวและ before คืออะไรล่ะ ความหมายตรงตัวเลยคือก่อนหน้าเลยครับคือก่อนหน้า class ของเรานั่นเอง ทีนี้เราก็แค่ประยุคใช้ทำเส้นขอบก่อนหน้า class เราทีนี้ก็จะได้แหลมๆตรงเมนูแล้วครับ

แบบนี้ทำที่หลายๆคนกำลังประสบปัญหา
Workspace 1_242.png
Workspace 1_242.png (33.87 KiB) Viewed 1002 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
Workspace 1_243.png (32.58 KiB) Viewed 1002 times
เพียงเท่านี้เพื่อนๆก็จะได้แหลมๆแล้วลองไปประยุคใช้กันดูนะครับ บายยย

ข้างบน