Kształty zdjęć

KOD DO EFEKTU:

<div style="text-align: center;">
<img class="circle" src="LINK DO ZDJĘCIA" /></div>

<style>
.circle {
  -webkit-clip-path: circle(40%);
  clip-path: circle(40%);}
</style>

KOD DO EFEKTU:

<div style="text-align: center;">
<img class="corner" src="LINK DO ZDJĘCIA" /></div>

<style>
.corner {
  -webkit-clip-path: circle(70% at 70% 20%);
  clip-path: circle(70% at 70% 20%);}
</style>

KOD DO EFEKTU:

<div style="text-align: center;">
<img class="ellipse" src="LINK DO ZDJĘCIA" /></div>

<style>
.ellipse {
  -webkit-clip-path: ellipse(40% 25%);
  clip-path: ellipse(40% 25%);}
</style>

KOD DO EFEKTU:

<div style="text-align: center;">
<img class="e-corner" src="LINK DO ZDJĘCIA" /></div>

<style>
.e-corner {
  -webkit-clip-path: ellipse(50% 65% at 70% 50%);
  clip-path: ellipse(50% 65% at 70% 50%);}
</style>

KOD DO EFEKTU:

<div style="text-align: center;">
<img class="triangle" src="LINK DO ZDJĘCIA" /></div>

<style>
.triangle {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
</style>

KOD DO EFEKTU:

<div style="text-align: center;">
<img class="star" src="LINK DO ZDJĘCIA" /></div>

<style>
.star {
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}
</style>

KOD DO EFEKTU:

<div style="text-align: center;">
<img class="x-shape" src="LINK DO ZDJĘCIA" /></div>

<style>
.x-shape {
  -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%);}
</style>