试图创建这个 css 功能区。与丝带的曲线作斗争答案

【问题标题】：Trying to create this css ribbon. Struggling with the curve of the ribbon试图创建这个 css 功能区。与丝带的曲线作斗争
【发布时间】：2019-12-14 09:10:27
【问题描述】：

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

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

如果我得到解决问题的正确曲线，我希望尽可能避免使用 svg。

【问题讨论】：

这里缺少图片？

标签： html css css-transforms css-shapes

【解决方案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>

【讨论】：

【解决方案2】：

这是你的起点。

.ribbon {
  --ribbon-height: 50px;
  display: inline-block;
  min-width: 150px;
  background-color: green;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
  position: relative;
  height: var(--ribbon-height);
  line-height: var(--ribbon-height);
  border-radius: 0 0 0 calc(var(--ribbon-height) / 2);
  text-align: right;
  margin: 0 0 0 calc(var(--ribbon-height) / 2);
  padding-right: 20px;
}

.ribbon::before {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  left: calc(-0.31* var(--ribbon-height));
  height: 80%;
  width: 50%;
  background-color: green;
  transform: skew(45deg, 0deg);
}

<div class="ribbon">
  Hello
</div>

【讨论】：