使一个 div 成为一个中间有一个圆圈的宽矩形

Question

我怎样才能把 adiv变成不规则的形状？我正在尝试创建一个导航栏，其中包含此 div 圆形中心的徽标。这是我想要做的：

我真的不知道从哪里开始，因为我从来没有做过任何div不是矩形的 s。div 的左侧将包含 2 个菜单项，右侧将包含 3 个菜单项，中心将包含我的圆形徽标。

Answer 1

您将需要使用精确的高度和尺寸进行游戏，但这可能会解决您的问题

.menu {
  background: darkgray;  
  padding: 1rem 0;
  margin: 5rem;
  text-align: center
}

.menu::after {
  content: '';
  background: darkgray;  
  border-radius: 50%;
  padding: 5rem;
}

<nav class="menu"></nav>