title: Coloring Overlapping Div Shapes Using CSS
body: <p>I am new to coding, and am trying to make the intersecting part of these div's a different color. My initial attempt was to create a third div with a border specification to mimic the shapes, but I cannot make it match perfectly.  Below is the markup and styling, describing what I want to be a red square and blue circle overlapping, with the overlap section being purple.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
      width: 200px;
      height: 200px;
      background: red;
      position: relative;
      top: 40px;
      left: -35px;
  }
  
  .shape {
      width: 250px;
      height: 250px;
      background: navy;
      border-radius: 50%;
      position: absolute;
      left: 50px;
      top: 50px;
  }
  
  #top-left {
      width: 148px;
      height: 147px;
      background: purple;
      position: absolute;
      top: 1px;
      left:2px;
      border-top-left-radius: 118px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
      &lt;div class="shape"&gt;
          &lt;div id="top-left"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there an easier way to do this, or a way to make the top-left-border perfectly round?</p>