title: How to create a transparent triangle with border using CSS?
body: <p>How can I create the following shape with CSS?</p>
  
  <p><img src="https://i.stack.imgur.com/yCC87.png" alt="Enter image description here"></p>
  
  <p>I tried this to be a solution:</p>
  
  <pre><code> .triangle:after {
          position:absolute;
          content:"";
          width: 0;
          height: 0;
          margin-top:1px;
          margin-left:2px;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid white;
      }
  
      .triangle:before {
          position:absolute;
          content:"";
          width: 0;
          height: 0;
          border-left: 12px solid transparent;
          border-right: 12px solid transparent;
          border-bottom: 12px solid black;
      }
  </code></pre>
  
  <p>You can see it working at <em><a href="http://jsfiddle.net/KEWBD/" rel="nofollow noreferrer">Triangle</a></em>. This is working, but with a trick of borders. Is there another way it could be done?</p>
  
  <p>Using SVG vectors this can be done easily, but I don't want to go that lengthy way.</p>