我一直在试图弄清楚如何使用The Code Player's CSS3 Squircles example在我的网站上创建一个iOS-7风格的应用程序图标(在Safari浏览器中测试)。该示例使用伪标签剪切背景颜色,而我需要在<img>
周围裁剪。如果你不熟悉,squircle就像一个圆角矩形,但是两边的圆角超出了圆角半径,如下所示:
.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>
最简单的解决方案可能是创建具有透明背景的图像,直到实现以下某些功能。
如果你可以通过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尚不支持此功能(将剪切的图像粘贴在屏幕的左上角)。有关更多信息,请参阅此链接:qazxsw poi
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);
}
SVG解决方案2:使用模式将图像添加为背景图像。
<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.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>
(撰写本文时的部分支持)SVG支持:http://caniuse.com/#search=clip-path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="470px" height="468px" viewBox="0 0 470 468" version="1.1">
<path fill="#987EFC" fill-rule="evenodd" d="M9.635 132.808C24.782 59.782 71.388 19.109 144.085 6.822c53.74-9.081 107.5-9.196 161.15.255 74.852 13.185 119.85 56.23 134.185 130.36 11.075 57.29 11.249 115.191-.174 172.427-15.324 72.52-63.132 117.285-135.561 129.527-53.74 9.08-107.5 9.195-161.15-.255-74.852-13.186-120.05-58.38-134.384-132.509-11.64-57.668-10.52-115.935 1.484-173.82z" id="path-1"/>
</svg>
.squircle {
width: 52.1em;
height: 52.1em;
position: relative;
display: inline-block;
margin: 1em auto;
vertical-align: middle;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 50% 0;
}
.squircle > * {
position: absolute;
width: 100%;
display: inline-block;
height: 100%;
background: 50% 50% no-repeat;
z-index: 5;
}
.squircle:before,
.squircle:after,
.squircle > *:before,
.squircle > *:after {
position: absolute;
background: #00aeef;
}
.squircle:before {
top: 0;
left: 4em;
border-top-left-radius: 20em 10em;
width: 50%;
bottom: 0;
border-bottom-left-radius: 20em 10em;
content: "";
}
.squircle:before {
top: 0;
left: 4em;
border-top-left-radius: 80% 10em;
width: 50%;
bottom: 0;
border-bottom-left-radius: 80% 10em;
content: "";
}
.squircle:after {
top: 0;
bottom: 0;
right: 4em;
border-top-right-radius: 80% 20%;
border-bottom-right-radius: 80% 20%;
width: 25em;
content: "";
}
.squircle > *:before {
top: 4em;
bottom: 4em;
border-top-left-radius: 100% 50%;
border-bottom-left-radius: 100% 50%;
width: 10em;
content: "";
}
.squircle > *:after {
top: 4em;
bottom: 4em;
right: 0;
border-top-right-radius: 100% 50%;
border-bottom-right-radius: 100% 50%;
width: 10em;
content: "";
z-index: 4;
}
body {
background: #1F1A1D;
}
body::before {
height: 100%;
content: '';
width: 0;
background: red;
vertical-align: middle;
display: inline-block;
}