html - 使用 CSS 的内圆底半径

Question

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

我如何使用 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属性用于链接之前创建的剪切路径。

工作示例:

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- 使用具有大框阴影值的旋转伪元素:

1. 创建 2 <div>父元素内的元素。
2. 使用::before或 ::after伪元素绘制小叠加层height和 border-radius .

3. 使用 CSS3 应用几度旋转 rotate()转型。

4. 应用大 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