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

最后

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

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

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

相关推荐
江号软件分享31 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js