How to create half square and curved shapes using css and html

Question

I am trying to draw a shape exactly like the one given in the image below

This is my html and css code, its shape is somewhat similar to this but in single color I don't know how to do it in multi color. Can anyone explain me how to do this. 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>

Answer 1

Just use background: linear gradient

Here you can view 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;
}

Answer 2

Using only a single element, you can use some CSS tricks to achieve this.

There is no magic number and this also applies to different element sizing.

Also, you can skip all border radius declarations into one line.

Border radius: 0 0 50% 0;

.right-angle-triangle-semicircle {
  width: 100px;
  height: 100px;
  background: lightgray;
  border-radius: 0 0 50% 0;
  overflow: hidden;
  position: relative;
}

.right-angle-triangle-semicircle:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #FFA6DF;
  width: 200%;
  transform: rotate(-45deg);
  transform-origin: bottom left;
}