วิธีสร้างครึ่งวงกลมด้วย CSS

” ภายในแท็ก body ของไฟล์ HTML ของเรา

---

---

HTML

< div >< / div >

ตอนนี้กำหนดขนาดที่เหมาะสมสำหรับ div เช่นเราจะกำหนด ' ความกว้าง ” มูลค่าทรัพย์สินเป็น “ 180px ' และ ' ความสูง ” ทรัพย์สินที่มีค่า “ 90px ” ในขั้นตอนต่อไป ให้ตั้งค่า “ รัศมีชายแดน ” มูลค่าทรัพย์สิน “ 12rem 12rem 0 0 ”; โดยที่ 12rem หลักแรกจะตัดแต่งด้านซ้ายบนของ div, 12rem ที่สองจะตัดแต่งด้านขวาบน ตัวเลขที่สามและสี่ 0 จะตัดส่วนด้านล่างทั้งหมดของ div ออก สุดท้าย เมื่อต้องการให้สีแก่วงกลม ให้ใช้ “ สีพื้นหลัง ” ทรัพย์สินที่มีค่า “ สีม่วง ”

CSS

div {
ความกว้าง : 180px ;
ความสูง : 90px ;
รัศมีชายแดน : 12rem 12rem 0 0 ;
สีพื้นหลัง : สีม่วง ;
}

บันทึกไฟล์ HTML ด้วยรหัสดังกล่าวและเปิดในเบราว์เซอร์ของคุณ:

อย่างที่คุณเห็น เราได้สร้างครึ่งวงกลมสำเร็จด้วยคุณสมบัติ CSS border-radius

ตัวอย่างที่ 2: สร้างครึ่งวงกลมจากด้านล่างด้วย CSS

สำหรับการก่อตัวของครึ่งวงกลมจากด้านล่าง เราจะตั้งค่าคุณสมบัติ border-radius เป็น “ 0 0 12rem 12rem ” โดยที่ค่าสองค่าแรกแสดงถึงรัศมีเส้นขอบด้านซ้ายบนและด้านขวาบน เราได้ตั้งค่าให้เป็น 0 เพื่อให้ครึ่งบนของ div หายไปอย่างสมบูรณ์ สำหรับด้านล่าง เราได้ตัดแต่งเฉพาะด้านล่างซ้ายและด้านล่างขวาเล็กน้อยโดยตั้งค่าเป็น 12rem

CSS

div {
ความกว้าง : 180px ;
ความสูง : 90px ;
รัศมีชายแดน : 0 0 12rem 12rem ;
สีพื้นหลัง : สีม่วง ;
}

เอาท์พุต

ตัวอย่างที่ 3: สร้างครึ่งวงกลมจากด้านขวาด้วย CSS

หากต้องการสร้าง CSS ครึ่งวงกลมทางด้านขวา ขั้นแรกให้ปรับความสูงและความกว้างของคอนเทนเนอร์ตามความจำเป็นเพื่อให้ได้รูปร่างที่เหมาะสมของวงกลม ตั้งค่า ' ความกว้าง ' เช่น ' 90px ' และ ' ความสูง ' เช่น ' 180px ' เวลานี้. อีกครั้ง ใช้คุณสมบัติ border-radius ด้วยค่า “ 0 12rem 12rem 0 ” โดยที่ค่าแรก 0 สำหรับด้านซ้ายบน ค่าสุดท้าย 0 สำหรับด้านซ้ายล่าง และค่าที่สองและสามจะถูกเพิ่มเพื่อตัดขอบด้านขวาบนและด้านขวาล่าง การใช้ค่าเหล่านี้จะสร้างครึ่งวงกลมจากด้านขวา

CSS

div {
ความกว้าง : 90px ;
ความสูง : 180px ;
รัศมีชายแดน : 0 12rem 12rem 0 ;
สีพื้นหลัง : สีม่วง ;
}

เอาท์พุต

ตัวอย่างที่ 4: สร้างครึ่งวงกลมจากด้านซ้ายด้วย CSS

คราวนี้ระบุคุณสมบัติ border-radius ตามค่า “ 12rem 0 0 12rem ”; ค่าแรกและค่าสุดท้าย 12rem จะตัดด้านซ้ายบนและด้านซ้ายล่างของ div การตั้งค่าที่สองและสามเป็น 0 จะทำให้ล้างด้านบนขวาและด้านล่างขวาของวงกลม ในที่สุด ครึ่งวงกลมด้านซ้ายของเราจะถูกสร้างขึ้น

CSS

div {
ความกว้าง : 90px ;
ความสูง : 180px ;
รัศมีชายแดน : 12rem 0 0 12rem ;
สีพื้นหลัง : สีม่วง ;
}

เอาท์พุต

เราได้นำเสนอวิธีการต่างๆ ในการสร้างครึ่งวงกลมด้วย CSS

บทสรุป

ในการสร้างครึ่งวงกลม เราสามารถใช้ CSS “ รัศมีชายแดน ' คุณสมบัติ. สามารถสร้างครึ่งวงกลมจากด้านหนึ่งไปอีกด้านหนึ่งได้ เช่น ไปทางซ้าย ขวา บนและล่าง ในคุณสมบัติ border-radius ค่าเริ่มต้นสำหรับด้านบนซ้าย ค่าที่สองสำหรับด้านบนขวา ค่าที่สามสำหรับด้านล่างขวา และค่าที่สี่สำหรับด้านล่างซ้าย บทความนี้ได้อธิบายวิธีสร้างครึ่งวงกลมด้วย CSS