在CSS

Question

型仿Android主屏幕上的图标我试图找到一种方法来重新对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舍入角落很简单。然而，制造“桶形失真”效果似乎相当困难。

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

编辑：从另一个答案在这里使用了相同的图像平添了几分梯度

Answer 2

并非完整答案，但可能让你更接近。

#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%; 
 
}

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

Answer 3

这里是我的努力：

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/