CSS畫布半弧是一種常見的WEB設(shè)計(jì)中常見的技術(shù)，可以通過CSS代碼進(jìn)行實(shí)現(xiàn)，下面請(qǐng)看具體實(shí)現(xiàn)方式。

//HTML代碼
<div class="arc">
</div>
//CSS代碼
.arc {
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
background: blue;
}

上述代碼中的div元素就是我們要繪制的半弧。代碼中，border-radius屬性用來設(shè)置元素的四個(gè)角的圓角半徑，前兩個(gè)值設(shè)置左上角圓角半徑，后兩個(gè)值設(shè)置右上角圓角半徑，由于我們要繪制半弧，因此只需要將左上角和右上角這兩個(gè)圓角半徑設(shè)置成元素寬度和高度的一半即可。另外，設(shè)置元素的背景顏色為藍(lán)色。

如果需要將半弧與直線相連，可以再添加一段CSS代碼：

//CSS代碼
.arc::before {
content: '';
width: 200px;
height: 1px;
background: blue;
display: block;
position: relative;
top: -50px;
}

上述代碼中，before偽元素用于在半弧上方繪制一條橫線。content屬性用于定義before元素的內(nèi)容，值為一個(gè)空字符串，width和height屬性設(shè)置before元素寬度和高度，將背景顏色設(shè)置為藍(lán)色，position屬性用于將元素定位到離半弧頂部50px的位置。

至此，通過CSS代碼就可以實(shí)現(xiàn)半弧繪制了。