前言

周四就是七夕了，七夕大家都有什么安排呀，在这里给兄弟们送上一颗由css 打造的爱心

这次稍微弄点不一样的爱心出来，首先呢先做一个粉色背景，并且使爱心在屏幕的中心位置

 body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: pink;
}

现在在添加img标签，并且把老婆的照片导入到img中

给设置图片宽度

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fok.166.net%2Freunionpub%2Fds%2Fnbot%2F20210702%2F142949-h5ka087zsw.jpeg&refer=http%3A%2F%2Fok.166.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661923954&t=566805a9472b7ae1b813b22c0323a3bd">
 img {
    width: 250px; 
 }
 body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: pink;
}

现在我们要做的将老婆的图片修改改成心形

这里先做心形下部的尖角

采用css 中 clip-path 和 polygon（）

clip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。

polygon() 是CSS中的内置函数此函数接受两个参数百分比或长度，用于保留多边形大小的值。

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fok.166.net%2Freunionpub%2Fds%2Fnbot%2F20210702%2F142949-h5ka087zsw.jpeg&refer=http%3A%2F%2Fok.166.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661923954&t=566805a9472b7ae1b813b22c0323a3bd">
 img {
    width: 250px; 
    clip-path: polygon(-41% 0, 50% 91%, 141% 0)
 }
 body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: pink;
}

最后只需要完成心形剩余部分即可

这里用到的是 css 的遮罩语法和 radial-gradient() 函数

遮罩语法：让一个元素按照某张图像的轮廓显示 -webkit-mask-box-image （其中加入webkit是为了浏览器兼容）

radial-gradient() 函数函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。这样就能创建出来两个弧度

<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fok.166.net%2Freunionpub%2Fds%2Fnbot%2F20210702%2F142949-h5ka087zsw.jpeg&refer=http%3A%2F%2Fok.166.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661923954&t=566805a9472b7ae1b813b22c0323a3bd">
 img {
    width: 250px; 
    clip-path: polygon(-41% 0, 50% 91%, 141% 0)
    --_m: radial-gradient(#000 69%, #0000 70%) 84.5% fill/100%;
    -webkit-mask-box-image: var(--_m);
 }
 body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: pink;
}

“我正在参加「创意开发投稿大赛」详情请看：掘金创意开发大赛来了！”

七夕来颗爱心吧

前言