스터디/WEB
Clipping CSS - Day3
행복한 수지아빠
2019. 5. 22. 01:07
반응형
.final__clip-image-1 {
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
}
.final__clip-image-2 {
-webkit-clip-path: polygon(0% 0%,
100% 0%,
100% 75%,
75% 75%,
75% 100%,
50% 75%,
0% 75%);
clip-path: polygon(0% 0%,
100% 0%,
100% 75%,
75% 75%,
75% 100%,
50% 75%,
0% 75%);
}
.final__clip-image-3 {
-webkit-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%);
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%);
}
.final__clip-image-4 {
-webkit-clip-path: polygon(0% 20%,
40% 20%,
40% 0%,
100% 50%,
40% 100%,
40% 80%,
0% 80%);
clip-path: polygon(0% 20%,
40% 20%,
40% 0%,
100% 50%,
40% 100%,
40% 80%,
0% 80%);
}
반응형