CSS Clip-Path? ??? ??? ?? ? ???? ????. 1. Circle (), Ellipse (), inset () ? polygon ()? ???? ?? ??? ????. 2. Polygon ()? ???? Hexagons? ?? ??? ???? ????. 3. Viewport ??? ???? ?? ?? ????? ?????. 4. ??? ???? ?? ?????? ??????. 5. ??? ?? ???, ?? ??, ??? ? ???? ?????. ???? ??????? ???? -webkit- ???? ???? ??? ??????. ?? ??? ???? ?? ?????? ??? ??? ???? ??? ?? ??? ?????.

CSS clip-path ? ??? ???? ??? ?? ??? ???? ??? ?? ? ?????. ??? ??, ?? ? ??? ?? ???? ??? ???? ??? ? ????. ??? ?? ? ??? ??? ??? ?? ????? ????? ???? clip-path ?????.

1. ?? ?? ??

inset() , circle() , ellipse() ? polygon() ? ?? ?? ?? ? ?? ??? ??? ? ????.

? ? ??

 .? {
  ?? ?? : ? (50%);
}

??? ??? ?? ??? ????. ??? ??? ??????.

?? ??

 .ELLIPSE {
  ?? ?? : ?? (50% 50%?? 50% 30%);
}

??? ??? ????. ?? ??? ?? ?? ? ?? ??? ??????.

? ?? (?? ??????? ????)

 .inset ??? {
  ?? ?? : ?? (10% ??? 20%);
}

? ???? (10%)?? ???? ???? ?????? (20%). ???? ??????? ??? ?????.

polygon (??? ??)

 .triangle {
  ?? ?? : ??? (50% 0%, 0% 100%, 100% 100%);
}

??? ???? ???? ????. x/y ??? ???? ?? ??? ?? ? ? ????.

2. ???? ??? ???

clip-path ???? ???? ?? ????? ????.

 <img src = "portrait.jpg"class = "Hexagon"alt = "Hexagon Image">

 .hexagon {
  ?? ?? : ??? (
    25% 0%, 
    75% 0%, 
    100% 50%, 
    75% 100%, 
    25% 100%, 
    0% 50%
  );
}

??? ??? ? ????? ???? ??? ??? ????.

? ? : Clippy ? ?? ??? ??? ???? ??? polygon() ??? ????? ??????.

3. ??? ??? ??? ?? ? ???

?? ??? ?? ??? ???? ????.

 . wave-bottom {
  ?? ?? : ??? (
    0% 0%, 
    100% 0%, 
    100% 90%, 
    50% 100%, 
    0% 90%
  );
}

???? ??? ???? ?? ?? ???? ??? ? ??? ?? ?? ????? ????.

??? ??? ????? ? ?? ???? :

 @keyframes wave-clip {
  0% {?? ?? : ??? (0 0, 100% 0, 100% 85%, 50% 100%, 0 85%); }
  100% {?? ?? : ??? (0 0, 100% 0, 100% 95%, 50% 100%, 0 95%); }
}

. wave-animate {
  ????? : Wave-Clip 3S ?? ?? ??? ? ??;
}

4. ??? ?? ??

???? ?? ??? ????.

 .card {
  ?? ?? : ??? (0 0, 100% 0, 100% 80%, 0 100%);
  ?? : ?? ?? 0.4S ??;
}

.card : ?? {
  ?? ?? : ??? (0 0, 100% 0, 100% 100%, 0 100%);
}

???? ???? ??? ????? ?????. ????? ??????.

?? ?? : ?? ???? ?????? transition ??????. ?? clip-path ?? ?? ?? (? : circle → polygon ) ??? ???? ???? ?? ???? ??? ?? ??? ??????.

5. ?? ?? ??

• ??? ? ??? : ?? ?? ??? ???? ???.
• ?? ?? : ?? SVG??? ??? ?? ??.
• ??? ??? : ? ??, ??? ????.
• ?? ?? ?? : ??? ?? (???? ?? ???? ??).

???? ?? ? ??

???? ?? ????? clip-path ????? :

• Safari? ?? ?? ??? -webkit-clip-path ?????.
• ??? ??? ?? -webkit- ?? ??? :

   .?? {
    -webkit-clip-path : ??? (50% 0%, 100% 100%, 0% 100%);
    ?? ?? : ??? (50% 0%, 100% 100%, 0% 100%);
  }

  ??? ????? ??? ??? ????? ???? ?????.

  ---

  ????? clip-path ???? ??? ???? ???? ???? ?????. ??? ???? ???? ?? ?????? ??? ? ?? ??? ?????? ???? ??????.

  ? ??? CSS ?? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!