Clipping CSS

스터디/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%);
   }