หน้า 1 จากทั้งหมด 1

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

โพสต์แล้ว: 22/08/2016 7:29 pm
โดย pond
ผมเชื่อหลายคนคงเคยลองทำแหลมๆให้เมนูเมื่อกด 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
เพียงเท่านี้เพื่อนๆก็จะได้แหลมๆแล้วลองไปประยุคใช้กันดูนะครับ บายยย