使用:before和:after伪元素+mask作为“hole”来创建这个。
不知何故：

.menu {
  --d: 30px;
  --background: blue;
  --padding-bottom: calc(2 * var(--d));
  min-height: calc(3 * var(--d));
  padding-bottom: var(--padding-bottom);
  background: var(--background) content-box;
  position: relative;
  -webkit-mask: radial-gradient(var(--d) at calc(4 * var(--d)) calc(100% - var(--padding-bottom)), #0000 98%, red);
          mask: radial-gradient(var(--d) at calc(4 * var(--d)) calc(100% - var(--padding-bottom)), #0000 98%, red);
  box-sizing: content-box;
}

.menu:before,
.menu:after {
  content: '';
  position: absolute;
  border-radius: 50%;
  aspect-ratio: 1;
  top: calc(100% - var(--padding-bottom));
  transform: translateY(-50%);
  box-sizing: border-box;
}

.menu:before {
  left: calc(2 * var(--d));
  background: var(--background);
  width: var(--d);
}

.menu:after {
  left: calc(5 * var(--d));
  width: calc(4 * var(--d));
  border: solid var(--d) var(--background);
}

/* This is just for demonstration */
body {
  margin: 0;
  background: linear-gradient(orange, yellow);
  min-height: 100vh;
}

<div class="menu"></div>

可以使用HTML和CSS。

.car {
  width: 300px;
  height: 100px;
  background-color: blue;
  position: relative;
}

.wheel {
  width: 80px;
  height: 80px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
}

.small_wheel {
  width: 30px;
  height: 30px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
}

.wheel.right {
  border: 30px solid blue;
  top: 44px;
  left: 150px;
  background: transparent;
}

.left {
  top: 65px;
  left: 70px;
}

.small_wheel_left {
  background-color: blue;
  top: 65px;
  left: 170px;
  top: 95px;
  left: 40px;
}

<div class="car"></div>
<div class="wheel right"></div>
<div class="wheel left"></div>
<div class="small_wheel small_wheel_left"></div>

一个可能的解决方案是添加span，使用绝对定位，并在最终结果中设置每个span的样式以匹配简单表单。
注意：不要忘记为h1标签创建一个蓝色的背景，并在上面添加span。
例如，对于最左边的小半圆，您可能希望制作一个蓝色圆，并将其中心与h1背景的底线对齐。
这将需要一些时间，所以我建议仍然考虑一个图像。