title: Triangle rendering as rectangle CSS due to mistake
body: <p>I'm a beginner with CSS and HTML and currently I'm trying to create a triangle with CSS styling. I've looked up how to do it online and the common wisdom seems to be with borders. I've tried using the examples I've seen but I just get a rectangle. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
      background-color: #DBDCDE;
      /*overflow: hidden;*/
      /*white-space: nowrap;*/
      position: relative;
  }
  
  .shape {
      position: absolute; 
      left: 0; 
      right: 0;
      top: 0; 
      bottom: 0;
      margin: auto;
  }
  
  .triangle {
      width: 0;
      height: 0;
      border-left: 100px solid transparent;
      border-right: 100px solid transparent;
      border-bottom: 100px solid blanchedalmond;
  }
  
  .blanchedalmond {
      background-color: blanchedalmond;
      left: -400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="shape triangle blanchedalmond"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I just get a rectangle on screen:</p>
  
  <p><a href="https://i.stack.imgur.com/hygdh.png" rel="nofollow noreferrer">rectangle</a></p>
  
  <p>(using Chrome to test)</p>