在CSS中模仿Android主屏幕图标

Question

我正试图在Android上重新创建主屏幕图标的精确形式 - 如下所示 -

仅使用CSS3。到目前为止，我的最大努力是使用:: before伪元素，如this fiddle所示。

的内容

Route::get('/home/', ['as' => 'home', 'uses' => 'HomeController@index']);
Route::get('/home/', 'HomeController@index')->name('home');

结果远非完美。

我希望这里的某个人能够提出更好的方法。使用CSS进行圆角是微不足道的。然而，创造了＃桶变形＆＃34;效果似乎很难。

Answer 1

一些计算和statice值.... 这种形状感觉有点接近，虽然不确定是否因为过多的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.S。使用了另一个答案中的相同图片：P

编辑：添加了一点渐变

Answer 2

也许使用（三星风格的）SVG并添加背景图片。

svg {
	position: relative;
	width: 120px;
}

<svg viewBox="0 0 447.77 446.21">
	<defs>
			<pattern id="img1" patternUnits="userSpaceOnUse" width="105%" height="105%">
					<image xlink:href="https://placezombie.com/640x360" x="0" y="0" preserveAspectRatio="xMinYMin slice" width="105%" height="105%"/>             
			</pattern>
	</defs>
	<path d="M20.64,139.81c15.14-73,61.75-113.7,134.45-126a470.57,470.57,0,0,1,161.14.26c74.86,13.18,119.85,56.23,134.19,130.36a444.84,444.84,0,0,1-.17,172.42c-15.33,72.52-63.14,117.29-135.57,129.53a470.63,470.63,0,0,1-161.15-.25C78.68,433,33.48,387.76,19.15,313.63,7.51,256,8.63,197.69,20.63,139.81Z" transform="translate(-11 -7)" fill="url(#img1)"/>
</svg>

Answer 3

不完整答案，但可能让您更接近。

＆＃13;

＆＃13;

#shape {
  position: relative;
  width: 55px;
  height: 55px;
  margin: 20px 0;
  background: red;
  border-radius: 65% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
#shape:before {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 2% / 50%;
}

＆＃13;

<div id="shape"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这是我的努力：

HTML：

<div class="icon-whatsapp"></div>

CSS：

body {
  background: #333;
}
.icon-whatsapp {
  height: 50px;
  width: 50px;
  background-color: #eff0f1;
  background-image: url('http://diylogodesigns.com/blog/wp-content/uploads/2016/04/whatsapp-logo-PNG-Transparent.png');
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  border:5px solid #eff0f1;
  border-radius: 38%/38%;
}

JSFiddle演示：https://jsfiddle.net/34m0yyn0/1/