How can i make a div's right height different from the left

Question

The image below shows exactly what I want to do

I simply want to remake this div. But nothing I have tried is getting me that shape

Answer 1

Use path with curves ( C command)

• Use this editor
• see the below image for some idea about editor
• Idea from @marian150 's answer

   .rating-container { width: 90px; height:50px; background-color: red; clip-path: path('M 0 10 C 0 0 12.5 0 75 10 C 75 10 87.5 10 87.5 20 V 30 C 87.5 40 75 40 75 40 C 12.5 50 0 50 0 40 V 10'); display:table-cell; text-align:center; vertical-align:middle; }

   <div class='rating-container'> some abcd </div>

Answer 2

You can use CSS property clip-path.

Here is a sample code:

<div class='rating-container'>
</div>

.rating-container {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');
}

This is not the shape you want, but just to show you an example.

You can also use online clip generators like https://be.nettfeely.com/clippy/