css - 在 CSS 中模仿 Android 主屏幕图标

Question

我试图找到一种方法来在 Android 上重新创建主屏幕图标的精确形式 - 如下所示 -



只使用 CSS3。到目前为止，我最大的努力是使用::before 伪元素，如 this fiddle 所示。 .类似的东西

.ospn:before
{
 position:absolute;
 z-index:-1;
 background-color:aqua;
 height:55px;
 width:60px;
 left:-6px;
 top:-2px;
 border-radius:40px; 
 content:'';
}

.ospn
{
 background-color:aqua;
 height:40px;
 width:40px;
 background-size:32px;
 background-repeat:no-repeat;
 background-position:center;
 border-radius:8px;
 display:inline-block;
 padding:5px;
 position:relative;
 }

结果远非完美。

我希望这里的某个人能够提出更好的方法。用 CSS 圆 Angular 是微不足道的。然而，创造“桶形失真”效果似乎相当困难。

Answer 1

一些计算和静态值....
这个形状感觉有点接近，虽然不确定是否会很有用，因为太多的 CSS 只应用于单个图标。

body {
  margin: 0px;
}
div {
  box-sizing: border-box;
}
.icon-wrap {
  display: inline-block;
  padding: 10px;
  width: 80px;
  height: 70px;
}
.icon-wrap > div {
  position: absolute;
  background-color: lightgray;
  height: 50px;
  width: 58px;
  display: block;
  border-radius: 15px/30px;
  background: rgb(247, 247, 247);
  background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: linear-gradient(to bottom, rgba(247, 247, 247, 1) 0%, rgba(229, 229, 229, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e5e5e5', GradientType=0);
}
.icon-wrap > div:before {
  content: '';
  display: inline-block;
  position: relative;
  z-index: -1;
  height: 59px;
  width: 48px;
  left: 5px;
  top: -5px;
  background-color: lightgray;
  border-radius: 30px/15px;
  background: rgb(247, 247, 247);
  background: -moz-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: -webkit-linear-gradient(top, rgba(247, 247, 247, 1) 0%, rgba(229, 229, 229, 1) 100%);
  background: linear-gradient(to bottom, rgba(247, 247, 247, 1) 0%, rgba(229, 229, 229, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#f7f7f7', endColorstr='#e5e5e5', GradientType=0);
}
.icon-wrap > div > img {
  position: relative;
  width: 40px;
  height: 40px;
  top: -60px;
  left: 9px;
}

<div class="icon-wrap">
  <div>
    <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/whatsapp-logo-PNG-Transparent.png" />
  </div>
</div>

<div class="icon-wrap">
  <div>
    <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/whatsapp-logo-PNG-Transparent.png" />
  </div>
</div>

<div></div>

<div class="icon-wrap">
  <div>
    <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/whatsapp-logo-PNG-Transparent.png" />
  </div>
</div>


<div class="icon-wrap">
  <div>
    <img src="http://diylogodesigns.com/blog/wp-content/uploads/2016/04/whatsapp-logo-PNG-Transparent.png" />
  </div>
</div>

附言在这里使用了另一个答案中的相同图像:P

编辑 : 添加了一点渐变