需求说明
- 最新大模型比较火，设计在对页面设计时经常会增加一些特殊的效果
- 我们常见的就是背景色需要通过渐变效果实现
- 同样的这次需求也有一个渐变的气泡效果
先看效果图
效果分析
- 如果只是简单的渐变效果那我们通过
background: linear-gradient(xxx) 就可以实现
- 但 U 给的效果是一个气泡效果，整体上要有一个渐变效果
可能的方案
拆分成两个区域
- 分成两部分去考虑，即一个是矩形区域，一个是下面的小三角。
- 这样的话会导致小三角没办法设置渐变，照成页面显示不协调，有断档的效果
- 拆分出来的去处理的结果就是两个区域拼接到一起时无法融合。
直接使用 U 给的图片
- 这样是可以实现的，但要保证图片的尺寸和时间的元素尺寸一致或者比例相同，否则会导致图片被拉伸
- 还有一个问题就是，当我们的内容是可变时，无法正常使用
使用 css 截取固定区域显示
clip-path CSS 属性 使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。
方案选择
- 目前看第三种方案是相对可行的，即：使用 css 截取固定区域显示
display: inline-block;
color: #fff;
background: linear-gradient(60deg, #3377ff 9.3%, #8c66ff);
clip-path: polygon(0 0, 100% 0, 100% 80%, 55% 80%, 50% 100%, 45% 80%, 0 80%);
padding: 2px 10px;
padding-bottom: 10px;
border-radius: 2px;
background: linear-gradient(60deg, #3377ff 9.3%, #8c66ff) 设置渐变效果clip-path 截取一个多边形区域用作显示区域polygon 用 “,” 分割的是坐标点，围成的区域是要显示的内容- 如果说确实是固定的值，不是百分比大小，也可以通过使用
calc()函数 计算值
实现代码
