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

德顺

发布于 2019-11-13 17:05:42

1.4K0

发布于 2019-11-13 17:05:42

文章被收录于专栏：前端资源

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

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

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

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

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

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

实现原理：

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

代码部分：

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

首先我们在 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地址：点击访问

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css