为什么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 内容的颜色

最后

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

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

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

相关推荐
举个栗子dhy1 分钟前
第一章、React + TypeScript + Webpack项目构建
前端·javascript·react.js
大杯咖啡5 分钟前
localStorage与sessionStorage的区别
前端·javascript
RaidenLiu17 分钟前
告别陷阱:精通Flutter Signals的生命周期、高级API与调试之道
前端·flutter·前端框架
非凡ghost17 分钟前
HWiNFO(专业系统信息检测工具)
前端·javascript·后端
非凡ghost19 分钟前
FireAlpaca(免费数字绘图软件)
前端·javascript·后端
非凡ghost26 分钟前
Sucrose Wallpaper Engine(动态壁纸管理工具)
前端·javascript·后端
拉不动的猪27 分钟前
为什么不建议项目里用延时器作为规定时间内的业务操作
前端·javascript·vue.js
该用户已不存在34 分钟前
Gemini CLI 扩展,把Nano Banana 搬到终端
前端·后端·ai编程
地方地方36 分钟前
前端踩坑记:解决图片与 Div 换行间隙的隐藏元凶
前端·javascript
jason_yang40 分钟前
vue3+element-plus按需自动导入-正确姿势
vue.js·vite·element