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

Question

如何将 div 制作成不规则的形状？我正在尝试创建一个导航栏，其中包含位于该 div 圆形中心的 Logo 。这是我想要做的:

我真的不知道从哪里开始，因为我从来没有制作过任何非矩形的 div。 div 的左侧将包含 2 个菜单项，右侧将包含 3 个菜单项，中间将包含我的圆形 Logo 。

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>