一般网站应用中都会应用到三角形，正三角形的写法也有很多，网上一搜一大把。
今天我看到一个带有不规则三角形气泡的写法，效果如下：
左边部分的矩形比较好实现，通过设置宽高可圆角就可以，但是右边的不规则三角不好用代码实现了。
在这里我们用到一个 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地址：点击访问
未经允许不得转载：w3h5 » CSS遮罩应用：带有不规则三角的气泡
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/150256.html