Ribbon with round edge - css

Question

I try to make this code:
https://codepen.io/HenryGuillen17/pen/baGxYj
<div class="ribbon"></div>
but it does not really come out. I want to make a ribbon which has those continuous edges, but I have not succeeded. In my work they demand that I then make an animation, as if I were taking off a curtain, but that could do it, we'll see.
The truth is that I must make that ribbon for a web page and I could not find the solution.
Thank you very much!

Answer 1

I added two final parts to the end of the ribbon because when skewing an element it will be easy to adjust the pseudo elements for it
HTML:
<div class="ribbon">
</div>
<div class="final-ribbon-part1">
<div class="final-ribbon-part2">
(S)CSS:
body {
margin : 0 !important;
}
$left-window: 10px;
$width-ribbon : 150px;
$height-ribbon : 300px;
$top-ribbon: 0px;
$left-ribbon: 0px;
$grosor-borde: 2px;
.ribbon {
top: $top-ribbon;
left: $left-ribbon;
position: absolute;
margin-left: $left-window;
background-color: #DDD;
width: $width-ribbon;
height: $height-ribbon;
border-radius : 0 0 35px 35px;
z-index: 1;
//border: 1px solid black;
background: rgba(147,186,19,1);
background: -moz-linear-gradient(top, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(147,186,19,1)), color-stop(50%, rgba(147,186,19,1)), color-stop(100%, rgba(2,102,45,1)));
background: -webkit-linear-gradient(top, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
background: -o-linear-gradient(top, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
background: -ms-linear-gradient(top, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
background: linear-gradient(to bottom, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93ba13', endColorstr='#02662d', GradientType=0 );
&:before {
height: $height-ribbon - 20;
border-left: $grosor-borde dashed #da5050;
border-right: $grosor-borde dashed #da5050;
content: '';
position: absolute;
width: $width-ribbon * 0.9;
left : $left-ribbon + 6px;
}
&:after {
height: $height-ribbon - 10;
border-left: $grosor-borde dashed #631a15;
border-right: $grosor-borde dashed #631a15;
content: '';
position: absolute;
width: ($width-ribbon * 0.9) - 10;
left : $left-ribbon + 6px + 5;
}
}
.final-ribbon-part1 {
top: $top-ribbon + $height-ribbon - 40px;
left: 11px;
background-color: #03662c;
width: 74px;
height: 147px;
position: absolute;
border-radius: 0px 0px 0px 90%;
z-index: -1;
&:before {
height: 96%;
width: 92%;
border-bottom: $grosor-borde dashed #da5050;
border-left: $grosor-borde dashed #da5050;
content: '';
position: absolute;
border-radius: 0 0 0 90%;
top: 0;
left: 3.5px;
}
&:after {
top: 0;
height: 92%;
width: 92%;
border-left: $grosor-borde dashed #631a15;
border-bottom: $grosor-borde dashed #631a15;
content: '';
position: absolute;
left : 10px;
border-radius: 0 0 0 90%;
}
}
.final-ribbon-part2 {
top: 0px;
left: 74px;
background-color: #03662c;
width: 74px;
height: 147px;
position: absolute;
border-radius: 0px 0px 0 90%;
z-index: -1;
transform: rotateY(180deg);
&:before {
height: 96%;
width: 92%;
border-bottom: $grosor-borde dashed #da5050;
border-left: $grosor-borde dashed #da5050;
content: '';
position: absolute;
border-radius: 0 0 0 90%;
top: 0;
left: 3.5px;
}
&:after {
top: 0;
height: 92%;
width: 86%;
border-left: $grosor-borde dashed #631a15;
border-bottom: $grosor-borde dashed #631a15;
content: '';
position: absolute;
left : $left-ribbon + 6px + 2;
border-radius: 0 0 0 98%;
}
}
Codepen here: https://codepen.io/Marouen/pen/KZKrYR?editors=1100