如何在引导导航栏的中心为logo创建一个半圆形？

<nav>
  <div class="logo-container">
    <div class="half-circle"></div>
    <img src="logo.png" alt="Logo">
  </div>
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
  padding: 10px;
}

.logo-container {
  position: relative;
}

.half-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff0000;
}

img {
  width: 50px;
  height: 50px;
}