为什么tooltip气泡箭头覆写样式不顺利

简介

重写el-form-item 交互时，涉及 el-tootlip 样式重写，发现此组件的小箭头样式重写耽误了一些时间，就研究了一下实现方式（挺有意思），在此记录一下

思路

使用 border 样式实现三角效果
利用父子 dom 元素，子元素覆盖父元素部分区域，达到拥有边框

实现

三角效果

如下图，逐渐变化最终实现想要的三角形状的样式
- 内容宽高为 100px，边框为 50px、实线，上下左右颜色设置不同（方便看出拼接边缘）
- 在前一个基础上，将宽高设置为 0（这次看拼接就有三角了）
- 在前一个基础上，根据箭头方向选择性将其他区域颜色设置为透明（三角出现了，但是现在大小还是为 100 * 100，需要将 border-bottom-width 设置为 0，才是需要的 1000 * 50）

css 复制代码

.triangle1 {
  width: 100px;
  height: 100px;
  border-width: 50px;
  border-style: solid;
  border-top-color: aqua;
  border-right-color: blueviolet;
  border-bottom-color: chocolate;
  border-left-color: crimson;
}
.triangle2 {
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-top-color: aqua;
  border-right-color: blueviolet;
  border-bottom-color: chocolate;
  border-left-color: crimson;
}
.triangle3 {
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-top-color: aqua;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-bottom-width: 0;
}

三角边框

如下图，三角边框为 10px
- 使用绝对定位，通过伪元素实现一个三角覆盖在父元素（三角），达到三角边框效果

css 复制代码

.triangle3 {
  position: relative;
  width: 0;
  height: 0;
  border-width: 50px;
  border-style: solid;
  border-top-color: aqua;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-bottom-width: 0;
  &::after {
    content: ' ';
    position: absolute;
    bottom: 10px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-width: 40px;
    border-style: solid;
    border-top-color: rgb(35, 132, 2);
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent;
    border-bottom-width: 0;
  }
}

三角融入显示框

外层增加一个 dom 元素 --- wrap
内部使用相对定位展示内容 --- content
三角（带边框）使用绝对定位指定位置
- 外层三角使用 content border 相关的颜色
- 内层三角（伪元素）使用 content 内容的颜色

最后

如果对你开发某些功能有所帮助，麻烦多点赞评论收藏😊

如果对你实现某类业务有所启发，麻烦多点赞评论收藏😊

如果...，麻烦多点赞评论收藏😊