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

最后

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

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

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

相关推荐
梦鱼16 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
best66617 分钟前
Flex 与 Grid 的 order 参数:布局界的 "插队神器"
前端
小噔小咚什么东东18 分钟前
看到了很多次WebRTC,但是你真的需要它吗?
前端·webrtc
猫七先生18 分钟前
微信小程序一键登录可行性方案
前端·微信小程序
维他AD钙19 分钟前
前端开发 8 个非常实用小技巧:高效解决日常开发痛点
前端
光影少年23 分钟前
webpack和vite优化方案都有哪些
前端·webpack·node.js
给月亮点灯|24 分钟前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js
kk不中嘞27 分钟前
Webpack 核心原理剖析
前端·webpack·node.js
Yvonne爱编码30 分钟前
简述ajax、node.js、webpack、git
前端·git·ajax·webpack·node.js·visual studio
周小码31 分钟前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d