深入解析：css 的 clip-path 属性，绘制气泡

气泡组装

• 气泡可以看做是由圆形和倒三角形组装起来的
• 利用 clip-path 属性，组装两个元素

圆形

width: 100px;
height: 100px;
clip-path: circle(50% at 50% 50%);
background: #ccc;

倒三角形

width: 100px;
height: 100px;
clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 0% 0%);
background: #ddd;

组合

• 两个元素组合到一起，调整宽度与定位位置

<div class="pop">
<div class="circle"></div>
<div class="trangle"></div>
</div><style lang="scss" scoped>.pop {width: 100px;height: 120px;position: relative;.circle {position: absolute;top: 0;left: 0;width: 100px;height: 100px;clip-path: circle(50% at 50% 50%);background: #ccc;}.trangle {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);width: 60px;height: 30px;clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 0% 0%);background: #ddd;}}
</style>

边框效果

• 用两个气泡叠加。下层气泡的尺寸略大于上层气泡的尺寸，形成边框效果

<template><div class="myPop"><div class="backBox"><div class="circle"></div><div class="trangle"></div></div><div class="frontBox"><div class="circle"></div><div class="trangle"></div></div><div class="msg">气泡</div></div>
</template><style lang="scss" scoped>.myPop {width: 102px;height: 122px;position: relative;& > div {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.circle {position: absolute;top: 0;left: 0;clip-path: circle(50% at 50% 50%);}.trangle {position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 0% 0%);}.backBox {width: 102px;height: 122px;.circle {width: 102px;height: 102px;background: #4e700f;}.trangle {width: 62px;height: 30px;background: #4e700f;clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 0% 0%);}}.frontBox {width: 100px;height: 120px;.circle {width: 100px;height: 100px;background: #d5f0a5;}.trangle {width: 60px;height: 30px;background: #d5f0a5;}}.msg {width: 100%;height: 100%;font-size: 20px;display: flex;align-items: center;justify-content: center;}}
</style>