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

最后

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

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

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

相关推荐
祝余呀1 分钟前
html初学者第一天
前端·html
速易达网络2 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
耶啵奶膘2 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
视频砖家3 小时前
移动端Html5播放器按钮变小的问题解决方法
前端·javascript·viewport功能
lyj1689973 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
小白变怪兽5 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头5 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全6 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing6 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆6 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试