Making rounded triangle shape using CSS - html

Question

I have been trying to create this shape in the bottom left and top right corners of the page. Unfortunately, I have not been able to create the desired look the closest that I have been able to achieve is a pie shape with the following code:
<style>
/* css code that will create, color, and shape
the first accent color area */
#colorAreaOne{
width: 700px;
height: 700px;
background: #3333ff;
opacity: 0.8;
border-radius: 0 700px 0 0;
-moz-border-radius: 0 700px 0 0;
-webkit-border-radius: 0 700px 0 0;
position: fixed;
bottom: 0px;
left: 0px;
}
/* css code that will create, color, and shape
the second accent color area */
#colorAreaTwo{
width: 700px;
height: 700px;
background: #3333ff;
opacity: 0.8;
border-radius: 0 0 700px; 0;
-moz-border-radius: 0 0 700px 0;
-webkit-border-radius: 0 0 700px 0;
position: fixed;
top: 0px;
right: 0px;
}
</style>
If anyone has any information it would be much appreciated. Thank you!

Answer 1

A radial-gradient
div {
width: 700px;
height: 700px;
margin: 1em auto;
background-image: radial-gradient(circle at 100% 0, transparent 0%, transparent 700px, black 700px);
}
<div></div>

Answer 2

You may use a square and use a round pseudo to fill parts of it with a shadow
div {
height:50vw;
width:50vw;
bottom:0;
position:fixed;
overflow:hidden;
}
div:before {
content:'';
display:block;
height:100%;
border-radius:0 0 0 50% ;
box-shadow:0 0 0 50vw turquoise;
<div></div>

Answer 3

border-radius: 50%; overflow: hidden;
.shape{
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
}
.shape:after{
content: "";
position: absolute;
left: -100%;
bottom: -100%;
width: 200%;
height: 200%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 400px solid;
<div class="shape"></div>

Answer 4

Here is one quick solution that will work if pseudo element is same color as background.
.el {
width: 200px;
height: 200px;
background: black;
position: relative;
overflow: hidden;
margin: 50px;
}
.el:before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 200%;
height: 200%;
background: white;
border-radius: 50%;
}
<div class="el"></div>