Trying To Create This Css Ribbon. Struggling With The Curve Of The Ribbon

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

Solution 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;
}

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

Solution 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: 000calc(var(--ribbon-height) / 2);
  text-align: right;
  margin: 000calc(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);
}

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