CSS畫半圓是一種常用的Web前端技術之一，在知乎等大型網站的UI設計中也經常用到。本文將介紹如何使用CSS和HTML畫半圓。

.half-circle {
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
background-color: #f00;
}

以上代碼是畫一個紅色的半圓形塊。我們來逐行分析一下。

• width表示該元素的寬度為100像素。
• height表示該元素的高度為50像素。因為半圓的直徑等于矩形的長度，所以高度只用設為直徑的一半。
• border-radius是CSS3的屬性之一，用于設置元素的圓角。具體到本例中，第一個50px表示左上角的圓角半徑，第二個50px表示右上角的圓角半徑，后面兩個0表示右下和左下的圓角半徑都設為0。
• background-color表示該元素的背景顏色為紅色。

通過以上代碼，我們可以成功畫出一個半圓形的塊。當然，我們還可以通過調整border-radius的值，實現不同效果的半圓形塊。例如，我們可以將左上和左下的半徑設置為0，即可得到一個指向右側的三角形。

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}

以上代碼即可畫出一個紅色的三角形。具體到CSS屬性，border-top和border-bottom分別表示上邊框和下邊框的樣式，border-right則表示右邊框的樣式。這三個屬性一湊在一起，就可以畫出一個指向右側的三角。

總結一下，CSS畫半圓、三角形等形狀，其實核心就是掌握border-radius和border-top/bottom/right/left這些屬性的用法。通過適當的調整數值，我們可以輕松地制作自己需要的動態效果。