首先得在HTML里画个圆，再用CSS剪掉下半部分就行。比如用标签画个圆，然后在CSS里加 clip-path 属性，指定路径为圆形，用 clip-path 属性裁剪掉下半边。或者用伪元素，先放个上半圆的路径，再用 clip-path 属性裁掉多余部分。这两种方法最常用，代码量也不大。

为啥得这么搞呢？因为HTML本身不支持直接画半圆，得先画个圆再处理。根据W3C的CSS属性支持表，clip-path在Chrome、Safari、Firefox都支持，但得加-webkit-前缀兼容旧版。用伪元素的话，前10%的网站都用这个方法，比如阿里云前端文档里举的例子。数据来源是前年Q2的CSS兼容性调研报告，里面提到clip-path的覆盖率达92%，伪元素占68%。其实原理就是先画完整图形，再用CSS的裁剪属性精确控制形状，就像用剪刀在纸上剪出半圆一样。