w3h5

CSS遮罩应用:带有不规则三角的气泡

一般网站应用中都会应用到三角形,正三角形的写法也有很多,网上一搜一大把。

今天我看到一个带有不规则三角形气泡的写法,效果如下:

CSS遮罩应用:带有不规则三角的气泡 经验总结 第1张

左边部分的矩形比较好实现,通过设置宽高可圆角就可以,但是右边的不规则三角不好用代码实现了。

在这里我们用到一个 CSS 的 遮罩属性(CSS Masks):-webkit-mask-image: url(mask.png); 

CSS遮罩是2008年4月由苹果公司添加到webkit引擎中的。

遮罩提供一种基于像素级别的,可以控制元素透明度的能力,类似于png24位或png32位中的alpha透明通道的效果。

实现原理:

类似于Photoshop中的剪切蒙板,图像是由rgb三个通道以及在每个像素上定义的颜色组成的。但是在他们之上还有第四个通道,alpha通道,通过亮度定义每个像素上的透明度。白色意味着不透明,黑色意味着透明,介于黑白之间的灰色表示半透明。实现原理如下图:

CSS遮罩应用:带有不规则三角的气泡 经验总结 第2张

代码部分:

说完原理我们来看一下代码:

首先我们在 body 中写一个 p 标签,class 设置为 mask

<body>
    <div class="mask"></div>
</body>

style 中给该标签设置背景、宽高和遮罩:

<style>
    .mask {
        background: url(img/pic.jpg) no-repeat center;
        background-size: cover;
        width: 247px;
        height: 305px;
        margin: 50px 10px;
        -webkit-mask-image: url(img/mask.png);
        float: left;
    }
</style>

背景图就是遮罩内展示的图片,遮罩图片就是有黑色图案的图片,这样就可以实现图一的效果了。

GitHub地址:点击访问

赞 (0)
分享到: +More |

评论 沙发

换个身份