如何在徽标所在的位置制作圆角标题

Question

我正在尝试使标题更圆并向下延伸到徽标所在的位置。

目前我在 a 标签上使用伪元素，其中包含具有白色背景和边框半径的徽标。
我希望它更像下面所附的图像，标题从左侧、徽标下方然后到右侧流动更多流体。

ChatGPT 建议使用剪辑路径，但它给出的每个示例都不起作用。

任何帮助将不胜感激。

我想要的示例：

Answer 1

您希望标题在不同的视口宽度上表现如何？您是否希望徽标下方的圆形延伸部分保持恒定大小并在水平拉伸视口时保持在适当位置，还是希望它按比例移动和拉伸？

我假设您希望扩展件保持恒定的大小并保持在适当的位置。最简单的方法是使用

background-image

。

body {
  background-image: url(https://picsum.photos/id/791/1000);
  background-size: cover;
  margin: 0;
}

header {
  height: 70px;
  padding: 0 100px 30px 160px;
  background-image: url(https://donald.au/bugs/so-79146597.webp);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header img {
  width: 120px;
  border-radius: 60px;
}

header nav {
  display: flex;
  gap: 1em;
}

header nav a {
  color: inherit;
  text-decoration: none;
}

<header>
  <img src="https://picsum.photos/id/1074/240">
  <nav>
    <a href="">Menu 1</a>
    <a href="">Menu 2</a>
    <a href="">Menu 3</a>
  </nav>

</header>