使用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 command用于关闭当前路径.

工作实例:

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 element用于定义元素/对象以供以后在SVG文档中使用.
• clipPath element用于定义剪切区域.
• rect element用于创建矩形.
• clip-path attribute用于链接先前创建的剪切路径.

工作实例:

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. <div>在父元素内创建2 个元素.
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转换:规范,MDN
• SVG:规格,MDN