【笔记】CSS伪类箭头的作用原理

NaSaga

已于 2022-03-16 21:51:45 修改

阅读量602

点赞数

文章标签： css css3 html

于 2022-03-16 21:13:59 首次发布

本文链接：https://blog.csdn.net/NaSaga/article/details/123534369

版权

三角箭头

利用content:’’;形成一个空的占位符，这个占位符虽然不可见，长宽都为0，但确实存在；
给占位符加四周的边框border时，会以占位符为原点，形成外辐射的形状。如实际效果图：
为了代码简练，事先将所有边框都设为透明：

border:50px solid transparent;

再给对应的边框上色即可：

border-right-color:#333;
上图有很多可以利用的形状：
- 上下左右的正向三角形；（4个）
- 斜左上、斜右上、斜左下、斜右下的斜向三角形（4个）
- 正上正下三角形组成的沙漏形（2个，不常用）
位置与对齐不可控，必须通过父元素的相对定位指定位置。
参考代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>箭头</title>
	<style>
		* {margin:0; padding:0; border:0;}
		div:before{content:''; border:50px solid #333; border-color:#333 #666 #999 #CCC; position:absolute; top:0; left:0;}
		div:after{content:''; border:50px solid transparent; border-right-color:#333; position:absolute; top:100px; left:0;}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

边框箭头

利用content:’’;形成占位符，并分配同样的高宽，形成正方形；
给占位符加细边框，使用两个边框夹为斜向箭头
利用CSS旋转样式，将边框旋转45度，两个边框组成了一个平行线箭头

transform:rotate(45deg);

两个边框组成了一个平行箭头

建议正方形的边与边框的粗细数值不要相差超过3:1，否则线条细长影响美观（根据实际需要来设）
这样形成的箭头，位置与居中度还是可以的。
也可以通过相对定位来决定位置。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>箭头</title>
	<style>
		* {margin:0; padding:0; border:0;}
		p::after {content:''; width:5px; height:5px; border-top:2px solid #333; border-right:2px solid #333; transform:rotate(45deg); position:absolute; top:10px; left:0;}
	</style>
</head>
<body>
	<p></p>
</body>
</html>

NaSaga

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【笔记】CSS伪类箭头的作用原理

利用content:’’;形成一个空的占位符，这个占位符虽然不可见，长宽都为0，但确实存在；给占位符加四周的边框border时，会以占位符为原点，形成外辐射的形状。如实际效果图：为了代码简练，事先将所有边框都设为透明：border:50px solid transparent;再给对应的边框上色即可：border-right-color:#333;上图有很多可以利用的形状：上下左右的正向三角形；（4个）斜左上、斜右上、斜左下、斜右下的斜向三角形（4个）正上..
复制链接

扫一扫