尝试创建此CSS功能区。挣扎丝带的曲线

Question

我尝试使用边框半径创建此CSS形状（功能区），但无法这样做，我能够获得的曲线与图像中的div曲线不完全匹配。

background: #008712;
  width: 89px;
  height: 22px;
  box-shadow: #d0dae0;
  background-color: #008712;
  border-bottom-left-radius: 70px;
}

如果我正确地解决了该问题，那么我将尽可能避免使用svgs。

Answer 1

使用伪元素进行一些偏斜转换：

.box {
  width:200px;
  padding:8px;
  font-size:25px;
  color:#fff;
  position:relative;
  overflow:hidden;
  text-align:right;
  z-index:0;
}
.box:before {
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:green;
  border-bottom-left-radius:20px;
  transform:skewX(28deg);
  transform-origin:top;
}

<div class="box">
  some text
</div>