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

最后

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

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

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

相关推荐
excel5 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着5 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友7 小时前
什么是API签名?
前端·后端·安全
会豪9 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子9 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶9 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子9 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_9 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark9 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
小徐_23339 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts