how to create shape with half square and curved shape uisng css and html

i am trying to draw a shape exactly given in the image below

enter image description here

here is my html and css code which gives shape somewhat similar to this but in single color i am not getting how can i do it in multicolor. Can anybody explain me how i can do it. Thanks in advance.

.right-angle-triangle-semicircle {
  width: 100px;
  height: 100px;
  background: #FFA6DF;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 0;
}
<div class="right-angle-triangle-semicircle"></div>

>Solution :

Just use background:linear-gradient

Here you can check the documentation about linear-gradient

.right-angle-triangle-semicircle {
  width: 100px;
  height: 100px;
  background: #FFA6DF;
 background: linear-gradient(-45deg, #f0f0f0 0%, #f0f0f0 50%, #FFA6DF 50%, #FFA6DF 100%);
  
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 0;
}
<div class="right-angle-triangle-semicircle"></div>

Leave a Reply