Making rounded triangle shape using CSS

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>