三角箭头
-
利用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>