title: Making rounded triangle shape using CSS
body: <p><a href="https://i.stack.imgur.com/E7LIw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E7LIw.png" alt="enter image description here"></a></p>
  
  <p>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:</p>
  
  <pre><code>&lt;style&gt;
  
    /* 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;
  
    }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>If anyone has any information it would be much appreciated. Thank you!</p>