如何使用倒置的边界半径？ [复制]答案

【问题标题】：How to use inverted border-radius? [duplicate]如何使用倒置的边界半径？ [复制]
【发布时间】：2022-02-02 05:09:31
【问题描述】：

我使用边框属性为菜单项提供一个指示器，我希望它像下图一样向后舍入：

我尝试使用边界半径，但结果如下：

还可以随意提出不同的方法来实现 react 中的侧边栏菜单指示器，因为我不确定这是否可以使用 css 属性。

【问题讨论】：

此处标记的类似问题是用于反转圆角，而我的问题是如何水平翻转圆角。我不认为他们有相同的答案。

标签： html css

【解决方案1】：

只需使用 before 并添加一个元素到样式

div {
  position: relative;
  display: inline-block;
  background-color: blue;
  width: 10em;
  height: 10em;
}

div::before{
  display: block;
  position: relative;
  content: '';
  width: 10%;
  top: 15%;
  height: 70%;
  background-color: white;
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

尝试使用 CSS-Tricks 的无限边框技术并应用边框半径。此方法需要边框和框阴影，而不是轮廓。

    img { border-radius: 4px;
 /* #1 */ border: 5px solid hsl (0, 0%, 40%);
 /* #2 */ padding: 5px; background: hsl (0, 0%, 20%);
 /* #3 outline: 5px solid hsl (0, 0%, 60%);
 */ /* #4 AND INFINITY......!!!

【讨论】：

您能否编辑您的答案并使用标签插入代码以提高可读性？ :) See markdown help
我不明白这与我想要的形状有什么关系。你能详细说明一下吗？

【解决方案3】：

伙计，至少将您的代码与问题一起发布，以便人们可以帮助您并建议您如何更正它。

P.S - 我知道这属于评论而不是答案，但我是 Stack Overflow 的新手，我对任何事情都没有意见

【讨论】：

伙伴，没有代码；这是纯 css，我想我清楚地用图像显示了所需的形状。