สร้างบอลลูนคำพูดง่ายๆ จากคำสั่ง before กับ triangle ของ CSS

before-triangle--css

เกริ่นนำ

บทความนี้จะมาบอกถึงเทคนิคในการสร้างบอลลูนคำพูดง่ายๆ ด้วยคำสั่ง CSS ซึ่งจะใช้ 2 คำสั่งพื้นฐาน คือ คำสั่ง before และ การสร้างสามเหลี่ยม (trangle) กัน

คำสั่ง before กับ after

คือ คำสั่งที่ใช้แทรกสิ่งที่เราต้องการไว้ก่อน หรือ หลังคลาสที่เราระบุ ซึ่งถือเป็นการช่วยลดปัญหาการสร้างคลาสเยอะจนเกินไปได้เป็นอย่างดีเลยทีเดียว

.talk::before{
  content: '...';
}

สร้างสามเหลี่ยม (trangle)

ใน CSS แรกๆ จะไม่สามารถสร้างสามเหลี่ยมได้ จึงต้องใช้รูปแทนการสร้างสามเหลี่ยม แต่ในเวอร์ชั่นปัจจุบันสามารถสร้างสามเหลี่ยมได้แล้ว ซึ่งสะดวก และ ง่ายในการปรับแต่งมากเลยที่เดียว และยังสามารถเข้าไป generator code ได้ที่ app.eky.hk เลย

.trangle{
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 15px 0 15px;
  border-color: #fff transparent transparent transparent;
}

ตัวอย่างโค้ด

โดย: [K] Narongchai Suphiratwanich

นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ Mennstudio และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย

สอบถาม & พูดคุย