home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

วางสามเหลี่ยมกึ่งกลางด้านล่างของ DIV ด้วย CSS

ใช้ Pseudo-element ::after วาดสามเหลี่ยม

.demo::after {
    content: "";
    position: absolute;
    border-top: solid 50px #e15915;    /* สีสามเหลี่ยม */
    border-left: solid 50px transparent; /* ซ้ายโปร่งใส */
    border-right: solid 50px transparent; /* ขวาโปร่งใส */
    top: 100%;          /* ติดด้านล่างของ parent */
    left: 50%;          /* กึ่งกลางแนวนอน */
    margin-left: -50px; /* ครึ่งหนึ่งของ border-left+right */
    width: 0;
    height: 0;
}

หลักการ: ใช้ border สร้างสามเหลี่ยม left: 50% + margin-left: -50px จัดให้กึ่งกลางพอดี