正在尝试创建此 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>

Answer 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>

正在尝试创建此 css 功能区。与色带的曲线作斗争

Trying to create this css ribbon. Struggling with the curve of the ribbon

html

css

css-transforms

css-shapes