ครึ่งวงกลม CSS สร้าง div ครึ่งวงกลม

ครึ่งวงกลม CSS สร้าง div ครึ่งวงกลม บทความนี้สอนสร้างครึ่งวงกลมจากแท็ก div โดยการกำหนด border radius มุมซ้ายบน และมุมขวาบน พร้อมกำหนดสี และขนาดความกว้าง และสูงของครึ่งวงกลม สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ครึ่งวงกลม CSS สร้าง div ครึ่งวงกลม

<style>
    .h_circle {
        width: 100px;
        height: 50px;
        background-color: cadetblue;
        border-top-left-radius: 100px;
        border-top-right-radius: 100px;
    }
</style>

<div class="h_circle"></div>

ครึ่งวงกลม CSS จากตัวอย่างสร้าง class ชื่อ h_circle กำหนดขนาด 100x50px ลงสีด้วย background-color และกำหนด border radius มุมซ้ายบน และมุมขวาบน ขนาด 100px ทำให้ div ดังกล่าวแสดงผลเป็นครึ่งวงกลม ด้วยภาษา CSS ร่วมกับภาษา HTML