2023年12月5日发(作者：vivoxplay6参数配置)
用CSS实现箭头arrow
用CSS即可绘制出各种箭头，无需裁剪图片，甚至没有用到CSS3的东西。对浏览器支持良好。
基本原理
原理非常简单，通过截取border(边框)的部分“拐角”实现，几行CSS代码即可理解：
一个梯形
当元素宽、高和边框的宽相近（等）时，改变某一边的颜色可以看到一个梯形；
一个三角形
当元素宽、高为零，且其他边为透明颜色时，可以形一个三角形。
任意角度的三角形
改变各个边的宽度，即通过调整“边框”厚度可以配置出任意角度
通过伪元素实现
三角形可以通过伪元素绘制出，而无需改变原来的DOM结构
文字内容文字内容
伪元素实现三角线箭头
通过伪元素绘制出的两个，一个与背景色相同覆盖部分红色箭头，形成三角线
文字内容
文字内容
三角线分割的Tab页
文字内容 Tab1
文字内容 Tab2
文字内容 Tab3
- 文字内容 Tab1
- 文字内容 Tab2
- 文字内容 Tab3
三角形跟矩形组合成提示框
这里还有另一种效果，使用三角形跟矩形组合成提示框，代码来自这篇文章：
主要是为了自己以后查找方便。
发布者：admin，转转请注明出处：http://www.yc00.com/num/1701790054a1147335.html
评论列表（0条）