<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%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.