如何仅使用CSS来编写应用程序图标图像

Question

我一直在摸索，试图弄清楚如何使用Code Player的CSS3 Squircles示例在我的网站上创建一个iOS-7风格的应用程序图标（在Safari浏览器中进行测试）。该示例使用伪标记来裁剪背景颜色，而我需要在周围裁剪<img>。如果您不熟悉，则鼠形就像一个圆角的矩形，但其侧面圆角超出了圆角半径，如下所示：

.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>

Answer 1

最简单的解决方案可能是创建具有透明背景的图像，直到实现以下某些功能。

如果您可以通过CSS添加图片，则只需在链接（.icons a）中添加高度，宽度，背景图片和背景尺寸。

注意：这可能不是理想的效果，因为它是由背景色补充的。

.icons a {
      height: 100px;
      width: 100px;
      background-image: url(http://lorempixel.com/256/256/abstract/2/);
      background-size: cover;
      text-decoration: none;
      color: white;
      display: inline-block;
      margin: 20px;
      border-radius: 24px;
      position: relative;
    }

    .icons a:before,
    .icons a:after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: inherit;
      border-radius: 100%;
      -webkit-transform: scaleX(2) scaleY(1.05);
      transform: scaleX(2) scaleY(1.05);
      clip: rect(0, 66px, 100px, 34px);
      z-index: -1;
    }

    .icons a:after {
      -webkit-transform: scaleY(2) scaleX(1.05) rotate(90deg);
      transform: scaleY(2) scaleX(1.05) rotate(90deg);
    }

<div class="icons">
  	<a href="#"></a>
</div>

如果不是这种情况，则可以为图像添加大小和边框半径。在这种情况下，伪圆形边界由'.icon a'元素上的背景色填充。

注意：这可能不是理想的效果，因为它是由背景色补充的。

.icons a {
      height: 100px;
      width: 100px;
      background: red;
      text-decoration: none;
      color: white;
      display: inline-block;
      margin: 20px;
      border-radius: 24px;
      position: relative;
    }
    .icons img{
      height: 100px;
      width: 100px;
      border-radius: 24px;
    }
    .icons a:before, .icons a:after {
      content: '';
      overflow: hidden;
      position: absolute; left: 0; top: 0;
      width: 100%; height: 100%;
      background: inherit;
      border-radius: 100%;
      -webkit-transform: scaleX(2) scaleY(1.05);
      transform: scaleX(2) scaleY(1.05);
      clip: rect(0, 66px, 100px, 34px);
      z-index: -1;
    }
    .icons a:after {
    	-webkit-transform: scaleY(2) scaleX(1.05) rotate(90deg);
    	transform: scaleY(2) scaleX(1.05) rotate(90deg);
    }

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

SVG解决方案1： 使用通过svg使用的剪切路径，但webkit尚不支持（将剪切后的图像粘贴在屏幕的左上方）。有关更多信息，请参见此链接：https : //css-tricks.com/clipping-masking-css/#comment-1587234

#squircle{  
  -webkit-clip-path: url(#svg-shape);
  -moz-clip-path: url(#svg-shape);
  -o-clip-path: url(#svg-shape);
  -ms-clip-path: url(#svg-shape);
  clip-path: url(#svg-shape);
}

<img src="http://lorempixel.com/400/400/abstract/2/" id="squircle">

<svg height="0" width="0" version="1.1"
	 xmlns="http://www.w3.org/2000/svg">
  <defs>
  <clipPath id="svg-shape">
<path d="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" />
  	</clipPath>
    </defs>
</svg>

SVG解决方案2： 使用图案将图像添加为背景图像。

svg.iOS-svg {
  height: 100px;
  width: 100px;
}

<svg class="iOS-svg" viewBox="0 0 200 200">
  <defs>
	<pattern id="squircle" patternUnits="userSpaceOnUse" width="200" height="200">
		<image xlink:href="http://lorempixel.com/256/256/abstract/2/" x="0" y="0" width="200" height="200" />
	</pattern>
  </defs>

	<path d="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" fill="url(#squircle)" />
</svg>

其他资源： http : //caniuse.com/#search=clip-path（在撰写本文时提供部分支持）SVG支持：http : //caniuse.com/#search=svg