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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
pond
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 571
ลงทะเบียนเมื่อ: 25/05/2016 9:44 am

ทำแหลมๆข้างบน 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) เปิดดู 151 ครั้ง


ให้เพื่อนใส่ 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) เปิดดู 151 ครั้ง


เพียงเท่านี้เพื่อนๆก็จะได้แหลมๆแล้วลองไปประยุคใช้กันดูนะครับ บายยย

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน