title: How to apply a specific shape to a div?
body: <p>I have this shape to do on a website: <a href="https://i.stack.imgur.com/7C81q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7C81q.png" alt="enter image description here"></a></p>
  
  <p>Unfortunately, I don't exactly know how to do it.</p>
  
  <p>I thought about <code>clip-path</code>, here is some code I tried:</p>
  
  <p>HTML (Vue):</p>
  
  <pre><code>...
  &lt;div class="col-md-7"&gt;
    &lt;q-gallery-carousel class="gallery-cropper" infinite autoplay :src="gallery"&gt;&lt;/q-gallery-carousel&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.gallery-cropper {
  
    clip-path: polygon(
      100% 0%,
      100% 100%,
      10% 100%,
      0% 0%
    );
  }
  </code></pre>
  
  <p>Which gives me this (photos are not the same but you get the thing):</p>
  
  <p><a href="https://i.stack.imgur.com/xtttB.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xtttB.jpg" alt="enter image description here"></a></p>
  
  <p>Right now, I need to do the top left rounded corner. Do I have to enter all thousands of coordinates manually... ?</p>
  
  <p>Also I know that <code>clip-path</code> isn't compatible with IE. I heard about loading a manual SVG, but again will I have to enter all coordinates manually ? And does a SVG apply to a <code>&lt;div&gt;</code> ?</p>