shaped containers

  • heart:
    clip-path: path('M213.1,6.7c-32.4-14.4-73.7,0-88.1,30.6C110.6,4.9,67.5-9.5,36.9,6.7C2.8,22.9-13.4,62.4,13.5,110.9 C33.3,145.1,67.5,170.3,125,217c59.3-46.7,93.5-71.9,111.5-106.1C263.4,64.2,247.2,22.9,213.1,6.7z');
    note: width must be 250px and height 220px
  • triangle:
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  • rhombus:
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  • star:
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  • bubble text:
    clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  • pentagon:
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);

more CSS clip-paths here!!!

Edit
Pub: 18 Apr 2023 22:05 UTC
Edit: 18 Apr 2023 22:16 UTC
Views: 395