title: CSS Shape or SVG mask, which is the best approach for responsive design?
body: <p>Hy !</p>
  
  <p>I would like to achieve this :
  <a href="https://i.stack.imgur.com/r7Ood.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/r7Ood.png" alt="Exemple"></a></p>
  
  <p>But I can not ... Can you give me a track or tutorial to follow?
  I tried with this model, but it is not responsive. <a href="https://jsfiddle.net/wey3jwfd/" rel="nofollow noreferrer">Here is my JsFiddle</a></p>
  
  <pre><code>&lt;div class="block"&gt;
     &lt;div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS :</p>
  
  <pre><code>.block {
    position: relative;
  }
  .block &gt; div {
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    border: 7em solid #1142AA;
    border-right: 7em solid transparent;
    left: 0em;
   top: 0em;
  }
  </code></pre>
  
  <p>Thank you ;-)</p>