css 反转的边界半径使用：背景前？

wfveoks0 于 2022-12-24 发布在其他

关注(0)|答案(1)|浏览(170)

我想用背景做一个反转的边界半径，如下所示：

下面是我的代码：

.curved {
  background: #D3041E;
  height: 200px;
  width: 100%;
  position: relative;
}

.curved::before {
  content: '';
  border-bottom-left-radius: 50% 100%;
  border-bottom-right-radius: 50% 100%;
  position: absolute;
  top: 0;
  width: 100%;
  background: #fff;
  height: 3%;
}

<div class="curved">
</div>

这是我目前得到的结果

css

来源：https://stackoverflow.com/questions/74900921/inverted-border-radius-using-a-before-background

1条答案

按热度按时间

mcvgt66p1#

因为你不能很好的控制边界半径所产生的曲线，所以下一个最好的选择是用svg来绘制样条曲线。
为了这个例子，我做了一个非常简单的路径。这里有进一步的细节：
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
坦率地说，我选择的路径并不完全符合您的预期结果，无论如何，如果您不能找到旨在使用边界魔法的解决方案，请随意走过这条路径（没有双关语）

.curved{ 
  background: #D3041E;
  height: 200px;
  width: 100%;
  position: relative;
}

<div class="curved">
  <svg width="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
    <path d="M 0 0 C 25 10, 75 10, 100 0" fill="white" />  
  </svg>
</div>

赞(0）回复(0）举报 2022-12-24

我来回答

css 反转的边界半径使用：背景前？

1条答案

相关问题

热门标签

最新问答