<section>
  <h2>circle</h2>
  <div class="item_mask item_mask01"></div>
</section>

<section>
  <h2>inset</h2>
  <div class="item_mask item_mask02"></div>
</section>

<section>
  <h2>画像マスク</h2>
  <div class="item_mask item_mask03"></div>
</section>
body{
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  padding: 20px;
}
section + section{
  margin-top: 40px;
}
h2{
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
}

.item_mask{
  width: 100px;
  height: 100px;
  background-image: linear-gradient(330deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
}
.item_mask01{
  clip-path: circle(50px at 50% 50%);
}
.item_mask02{
  clip-path: inset(0px round 10px);
}
.item_mask03{
  clip-path: path("M0,45H70L35,90Zm0,0L35,0,70,45Z");
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.