App-Icons mit Squircle-Radius

Mit clip-path kann man App-Icons auch einen Squircle-Radius verpassen:

<img src="https://kegelclub-tüddern.de/assets/app/icons/icon-384.png" width="200" height="200" alt="Kegelclub">
img {
  border-radius: 22%;
}

@supports (clip-path: path("")) {
  img {
    border-radius: unset;
    clip-path: path("M100,200c43.8,0,68.2,0,84.1-15.9C200,168.2,200,143.8,200,100s0-68.2-15.9-84.1C168.2,0,143.8,0,100,0S31.8,0,15.9,15.9C0,31.8,0,56.2,0,100s0,68.2,15.9,84.1C31.8,200,56.2,200,100,200z");
  }
}

Demo auf CodePen

Likes

  • Dominik Schwind