简介
- 重写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 内容的颜色
最后
如果对你开发某些功能有所帮助,麻烦多点赞评论收藏😊
如果对你实现某类业务有所启发,麻烦多点赞评论收藏😊
如果...,麻烦多点赞评论收藏😊