Ich habe meinen Kopf gegen die Wand geschlagen, um herauszufinden, wie man es benutzt Das CSS3 Squircles-Beispiel des Code Players, um ein App-Symbol im iOS 7-Stil auf meiner Website zu erstellen (Testen im Safari-Browser). Das Beispiel verwendet Pseudo-Tags, um die Hintergrundfarbe zu beschneiden, während ich um ein @ herum beschneiden mus<img>. Falls Sie nicht vertraut sind, ein squircle ist wie ein abgerundetes Rechteck, aber mit den Seiten, die sich jenseits des Eckenradius abrunden, wie folgt:

.icons img {
  width: 100px;
  height: 100px;

  border-radius: 24%;
}

.icons a {
  text-decoration: none;
  display: inline-block;
  position: relative;
}
/*Now we will create fish-eye shapes using pseudo elements and clip them to add a curve to the sides of the icons*/
.icons a:before, .icons a:after {
  content: '';
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
  background: inherit;
  border-radius: 100%; /*circle*/
  /*time to transform the circle into fish-eye shape. iOS7 style now.*/
  -webkit-transform: scaleX(2) scaleY(1.05);
  transform: scaleX(2) scaleY(1.05);
  /*clipping the left and right sides - 17px from the left and right*/
  clip: rect(0, 66px, 100px, 34px);
  /*pushing it behind the icon*/
  z-index: -1;
}
/*duplicating the :before element and rotating it 90deg and swapping the X/Y transforms*/
.icons a:after {
  -webkit-transform: scaleY(2) scaleX(1.05) rotate(90deg);
}

<div class="icons">
  <a href="#"><img src="http://lorempixel.com/256/256/abstract/2/" /></a>
</div>