如何添加箭头？

添加箭头

    我们可以用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;

}