本文翻译自 CSS Shapes: The Heart,作者: Temani Afif, 略有删改。
我们将使用CSS创建一个心形图案。你可能会说:“为什么又一篇关于心形的文章?已经做过很多了!“。我们不会只建立一个心形图案,我们会使用现代的CSS技巧来实现。忘记带有border-radius
和rotation
的伪元素。我们也将把图像转化为心形图案!
使用CSS渐变
第一种实现方法,我们将基于多个渐变来创建一个心形图案。
.heart {
--c: red;
width: 200px;
aspect-ratio: 1;
background:
/* 1 */ radial-gradient(circle at 60% 65%,var(--c) 64%,#0000 65%) top left/50% 50%,
/* 2 */ radial-gradient(circle at 40% 65%,var(--c) 64%,#0000 65%) top right/50% 50%,
/* 3 */ conic-gradient(from -45deg at 50% 85.5%,var(--c) 90deg,#0000 0) bottom/100% 50%;
background-repeat: no-repeat;
}
我们使用aspect-ratio: 1
定义一个正方形元素。然后使用三个渐变层来创建最终的形状。这里有一个插图来理解每个渐变的实际作用位置。
每个radial-gradient()
将占据顶部元素的四分之一,以创建形状的圆形部分。conic-gradient()
将在底部创建三角形部分。
可以通过调整宽度值来控制的心形图案大小和CSS变量来改变颜色。
值得注意的是,我们可以找到不同的语法来使用渐变实现相同的结果。下面是另一个代码较少的例子:
.heart {
--c: red;
width: 200px;
aspect-ratio: 1;
background:
radial-gradient(at 70% 31%,var(--c) 29%,#0000 30%),
radial-gradient(at 30% 31%,var(--c) 29%,#0000 30%),
conic-gradient(from -45deg at 50% 84%,var(--c) 90deg,#0000 0)
bottom/100% 50% no-repeat;
}
但都有相同的配置:两个radial-gradient()
和一个conic-gradient()
,只是书写不同。
使用 Clip-path
有时当我们使用conic-gradient()
可能会遇到一些锯齿边缘的问题。为了避免这种情况,我们可以使用clip-path
:
.heart {
--c: red;
width: 200px;
aspect-ratio: 1;
background:
radial-gradient(at 70% 31%,var(--c) 29%,#0000 30%),
radial-gradient(at 30% 31%,var(--c) 29%,#0000 30%),
linear-gradient(var(--c) 0 0) bottom/100% 50% no-repeat;
clip-path: polygon(-43% 0,50% 91%, 143% 0);
}
使用linear-gradient()
替换了conic-gradient()
,用主色覆盖底部区域。然后使用clip-path
剪切元素并创建三角形形状:
使用 border-image
我们可以继续优化代码,用一个渐变替换三个渐变。我们将在使用border-image
中使用radial-gradient()
。
.heart {
--c: red;
width: 200px;
aspect-ratio: 1;
border-image: radial-gradient(var(--c) 69%,#0000 70%) 84.5%/50%;
clip-path: polygon(-42% 0,50% 91%, 142% 0);
}
看上面的border-image
语法可能有点难理解,让我们仔细分析一下。它是以下的简写:
border-image-source: radial-gradient(var(--c) 69%,#0000 70%);
border-image-slice: 84.5%;
border-image-width: 50%;
最棘手的值是border-image-slice
。可能需要一篇文章来解释这个概念,所以我会尽量让它简单。当你在切片中使用100%时,每个角上都会有一个圆圈。使用50%将给予你一个完整的圆覆盖整个元素。如果你手动使用50%和100%之间的值,你可以得到我们需要的形状。值为84.5%。
最后我们应用clip-path
,得到心形图案的效果,如下图所示:
把图像变成一心形
实现一个心形图案是好的,但把在一个图像里面实现心形会更好!为此,我们将使用mask
重用前面的代码。使用background
的方法将依赖于mask
,带边框的方法将依赖于mask-border
。
但现在mask-border
的浏览器支持非常低,因此将依赖于mask
属性作为降级。
img {
width: 250px;
aspect-ratio: 1;
--_m: radial-gradient(#000 69%,#0000 70%) 84.5%/50%;
-webkit-mask-box-image: var(--_m);
mask-border: var(--_m);
clip-path: polygon(-42% 0,50% 91%, 142% 0);
}
/* fallback until better support for mask-border */
@supports not (-webkit-mask-box-image: var(--_m)) {
img {
--_m:
radial-gradient(at 70% 31%,var(--c) 29%,#0000 30%),
radial-gradient(at 30% 31%,var(--c) 29%,#0000 30%),
linear-gradient(#000 0 0) bottom/100% 50% no-repeat;
-webkit-mask: var(--_m);
mask: var(--_m);
}
}
我们用一个小技巧把我们的图像变成了一个心形。由于前缀和浏览器的支持,代码看起来有点长,但将来它只会是这一个:
img {
width: 250px;
aspect-ratio: 1;
mask-border: radial-gradient(#000 69%,#0000 70%) 84.5%/50%
clip-path: polygon(-42% 0,50% 91%, 142% 0);
}
增加一个很酷的悬停效果来显示您的心形图像:
最后
没有伪元素,没有圆角,没有旋转。使用现代CSS技巧,基于一个元素和几行代码既可创建一个心形图案。
看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~
专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)
暂无评论