i am trying to draw a shape exactly given in the image below
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>
Using just a single element, you can use a few small CSS tricks to achieve this.
No magic numbers, and will work with different resizing the element too.
Further to this, you can skip all the border-radius declarations into a single 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;
}
<div class="right-angle-triangle-semicircle"></div>