如何添加箭头？
导读：添加箭头 我们可以用CSS伪元素::after及content属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。 以下实例演示了如何为显示在顶部的提示工具添加底部箭头： 顶部提示框/...
添加箭头
我们可以用CSS伪元素::after及content属性为提示工具创建一个小箭头标志，箭头是由边框组成的，但组合起来后提示工具像个语音信息框。
以下实例演示了如何为显示在顶部的提示工具添加底部箭头：
顶部提示框/底部箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* 提示工具底部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
实例解析
在提示工具内定位箭头:top:100%,箭头将显示在提示工具的底部。left:50%用于居中对齐箭头。
注意：border-width属性指定了箭头的大小。如果你修改它，也要修改margin-left值。这样箭头在能居中显示。
border-color用于将内容转换为箭头。设置顶部边框为黑色，其他是透明的。如果设置了其他的也是黑色则会显示为一个黑色的四边形。
以下实例演示了如何在提示工具的头部添加箭头，注意设置边框颜色：
底部提示框/顶部箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%;
/* 提示工具头部 */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
以下两个实例是左右两边的箭头实例：
右侧提示框/左侧箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%;
/* 提示工具左侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
左侧提示框/右侧箭头：
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%;
/* 提示工具右侧 */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何添加箭头？
本文地址： https://pptw.com/jishu/664031.html