HTML5中绘制半圆有四种方法：一、用border-radius+overflow裁切上半圆；二、用左右圆角+overflow裁切左半圆；三、用clip-path的circle()函数定义左/右半圆；四、用SVG的arc命令绘制精准半圆。
如果您希望在HTML5中绘制一个半圆，可以通过CSS的border-radius属性结合overflow裁切实现。以下是几种可行的绘制方法：
一、使用border-radius和overflow隐藏实现上半圆
该方法利用元素宽高比为2:1的矩形，设置border-radius为50%使其变为整圆，再通过父容器设置overflow:hidden并仅显示上半部分，从而裁切出上半圆。
1、创建一个宽200px、高100px的div作为子元素，并设置background-color为蓝色。
2、为该div设置border-radius: 50%；此时它会呈现为一个横向拉伸的椭圆而非正圆。
立即学习“前端免费学习笔记（深入）”；
3、将该div嵌套在一个宽200px、高50px且overflow: hidden的父容器中。
4、给子div添加transform: translateY(-50px)；使顶部半圆区域刚好暴露在父容器可视区域内。
5、关键点：子元素高度必须等于父容器宽度，且父容器高度为子元素高度的一半。
二、使用border-radius配合固定宽高比实现左半圆
通过设定元素宽高相等，仅对左右两侧应用border-radius，再结合overflow:hidden与水平位移，可精准截取左半圆。
1、创建一个宽100px、高100px的div，背景设为红色。
2、设置border-top-left-radius: 100px；border-bottom-left-radius: 100px；其余两个角保持直角。
3、将该div放入一个宽50px、高100px且overflow: hidden的容器中。
4、为该div添加margin-left: -50px；使其左边缘与父容器左边缘对齐，右半部分被裁掉。
5、注意：border-radius值必须等于原始元素的宽或高，否则无法形成标准半圆弧。
三、使用clip-path属性直接定义半圆形状
该方法不依赖border-radius与溢出裁切，而是通过CSS clip-path精确限定渲染区域，兼容现代浏览器且语义清晰。
1、创建一个宽200px、高200px的div，背景设为绿色。
2、添加样式clip-path: inset(0 100px 0 0 round 100px); 表示从右侧裁去100px宽区域，并保留右上/右下圆角。
3、改为clip-path: circle(100px at 0 100px); 可生成以左侧中点为圆心、半径100px的左半圆。
4、clip-path中的circle()函数需指定半径和圆心坐标，圆心x=0时生成左半圆，x=宽度值时生成右半圆。
四、使用SVG内联绘制半圆路径
SVG提供原生路径指令，可通过arc命令（A）精准绘制任意起止角度的圆弧，是最可控的半圆实现方式。
1、在HTML中插入svg width="200" height="100">标签。
2、在svg内部添加
3、其中A100,50表示x半径100、y半径50，0 0,1控制大弧与方向，起点M0,50到终点200,50构成上半椭圆弧。
4、若需正半圆，将y半径设为与x半径相同，并调整height为200，d中终点y坐标改为100。
5、SVG的A指令参数顺序不可颠倒，第四个参数为large-arc-flag，第五个为sweep-flag，决定弧线走向。
