title: Is it possible to mask or clip an image's shape using CSS?
body: <p>I am trying to create this design in CSS. Is it possible?</p>
  <p><img src="https://i.stack.imgur.com/Z2zab.png" alt="the  design is it:" /></p>
  <p>This is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.triangle{
      border-radius: 50%;
      width: 120px;
      height: 120px;
  }
  .triangle img {
      width: 120px;
      height: 120px;
  }
  .triangle::after{
      right: 150px;
      top: 50%;
      border: solid transparent;
      content:"";
      height:  0px;
      width:  0px;
      position: absolute;
      pointer-events: none;
      border-color: white;
      border-left-color: white;/*white is the color of the body*/
      border-width: 60px;
      margin-top: -60px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="triangle"&gt;
      &lt;img src="http://deskode.com/images/placeholder/team/07.jpg"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The triangle is formed, but not in the same way as the image.</p>
  <p><a href="https://jsfiddle.net/grijalvaromero/oympoe9k/" rel="nofollow noreferrer">jsFiddle</a></p>