<div class="circle"></div>
<div class="ellipse"></div>
<div class="polygon"></div>
<div class="close"></div>
div {
  display: inline-block;
  width: 150px;
  height: 150px;
  background: linear-gradient(118.17deg, #03ACF2 6.86%, #C8E6C9 103.41%);
}

/* 좌측으로 45px, 상단에서 5px만큼 이동한 지점을 기준으로 30px만큼만 보여주기 */
.circle {
  clip-path: circle(30px at 45px 5px)
}

/* 중앙에서부터 30px 60px의 크기를 가지는 타원형 */
.ellipse {
  clip-path: ellipse(30px 60px at center)
}

/* 두 값은 좌측과 상단을 기준으로 떨어진 값입니다 */
.polygon {
  clip-path: polygon(2px 10px, 140px 23px, 120px 136px, 33px 122px)
}

.close {
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.