title: CSS Diamond / Triangle shaped divider line / border
body: <p>I have the following gold dividing line I'm trying to create in pure CSS.</p>
  
  <p><a href="https://i.stack.imgur.com/zF4mr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zF4mr.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to create this with the <code>transform:scale;</code> CSS So far I have found the following:</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>.border_angle {
   border: 50vw solid transparent;
   width: 0;
   height: 0;
   border-bottom-color: transparent;
   border-left-color: transparent;
   border-top-color: transparent;
  
   transform: scaleY(0.105) translateY(-50%);
   -webkit-transform: scaleY(0.105) translateY(-50%);
   -o-transform: scaleY(0.105) translateY(-50%);
   -moz-transform: scaleY(0.105) translateY(-50%);
   -ms-transform: scaleY(0.105) translateY(-50%);
   
   position: absolute;
   transform-origin: top center;
   top: 0;
   left: 0;
   right: 0;
   z-index: 11;
  }
  
  .border_angle_gold_l {
   border-left-color: #BE955A;
  }
  
  .border_angle_gold-light_r {
   border-right-color: #CCA56B;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="margin-top: 200px;" class="border_angle border_angle_gold_l border_angle_gold-light_r"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Essentially, I nearly have it but I just need to reverse the triangles!! I can't figure out how... Any help would be massively appreciated.</p>