使用 CSS 的内圆底半径

Question

我想创建一个像这样的底部圆角形状 -

我如何使用 CSS 完成此任务？

Answer 1

基于 SVG 的方法：

CSS 可能不是创建此类形状的最佳方式。您应该改用 SVG。

1- 使用 path 元素：

我们可以使用 SVG 的 path 元素来创建这个形状并用一些颜色、渐变或图案填充它。

只有一个属性 d 用于定义 path 元素中的形状。此属性本身包含许多短命令和这些命令运行所需的几个参数。

下面是创建这个形状的必要代码：

<path d="M0,0 0,20
         Q25,25 50,50
         Q75,25 100,25
         L100,0 Z" />

我在 path 元素中使用了 4 个命令。以下是简要说明：

M命令用于定义起点。它出现在开头并指定绘图的起点。
Q命令用于绘制曲线
L命令用于画直线
Z命令用于关闭当前路径

工作示例：

svg {
  width: 100%;
}

<svg width="100" height="50" viewBox="0 0 100 50" preserveAspectRatio="none">
  <path d="M0,0 0,20
           Q25,25 50,50
           Q75,25 100,25
           L100,0 Z" fill="brown" />
</svg>

2-剪裁：

剪切意味着删除或隐藏元素的某些部分。

在这种方法中，我们使用 SVG 的 clipPath 元素定义了一个剪辑区域，并将其应用于矩形元素。裁剪区域之外的任何区域都将被隐藏。

下面是必要的代码：

<defs>
    <clipPath id="shape">
      <path d="M0,0 0,20
               Q25,25 50,50
               Q75,25 100,25
               L100,0 Z" />
    </clipPath>
</defs>
<rect x="0" y="0" width="100" height="50" fill="brown" clip-path="url(#shape)"/>

defs 元素用于定义元素/对象，供以后在 SVG 文档中使用。
clipPath 元素用于定义裁剪区域。
rect 元素用于创建矩形。
clip-path属性用于link之前创建的剪切路径。

工作示例：

svg {
  width: 100%;
}

<svg width="100" height="50" viewBox="0 0 100 50"
     preserveAspectRatio="none">
  <defs>
    <clipPath id="shape">
      <path d="M0,0 0,20
               Q25,25 50,50
               Q75,25 100,25
               L100,0 Z" />
    </clipPath>
  </defs>
  <rect x="0" y="0" width="100" height="50" fill="brown" clip-path="url(#shape)"/>
</svg>

CSS 基于方法：

1- 使用具有大框阴影值的旋转伪元素：

在父元素内创建 2 <div> 个元素。
使用::before或::after伪元素绘制小height和border-radius的叠加。
使用 CSS3 rotate() 变换应用几度旋转。
应用较大的 box-shadow 值并调整它们以看起来像最终形状。

输出图像：

工作示例：

.container {
  position: relative;
  overflow: hidden;
  height: 80px;
}

.left,
.right {
  position: relative;
  overflow: hidden;
  height: 100%;
  float: left;
  width: 50%;
}
.right {
  float: right;
}

.left:before,
.right:before {
  box-shadow: 0 0 0 150px brown;
  transform-origin: left bottom;
  transform: rotate(-3deg);
  border-radius: 100%;
  position: absolute;
  bottom: -70px;
  height: 100px;
  content: '';
  width: 200%;
  left: -10%;
}

.left:before {
  transform-origin: right bottom;
  transform: rotate(3deg);
   right: -10%;
  left: auto;
}

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

有用的资源：

CSS3 次转换：Specs, MDN
SVG：Specs, MDN

使用 CSS 的内圆底半径

Inner rounded bottom radius using CSS

html

css

css-shapes

基于 SVG 的方法：

CSS 基于方法：