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

Question

I've tried to create this css shape (ribbon) using border radius but I'm unable to do so, the curve I'm able to get isn't exactly matching the div's curve in the image.

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

If I get this curve right that solves the problem, I would like avoid svgs if possible.

Answer 1

Use pseudo element with some skew transformation:

.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

Here's a starting point for you.

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