在CSS中,下拉菜单常常使用下拉三角形状来展示当前菜单被选项的子项目。然而,这个三角通常默认为黑色,如果需要更改颜色,可以参考以下的CSS代码:/* 定义一个自定义三角的类名 */ .custom-t
在CSS中,下拉菜单常常使用下拉三角形状来展示当前菜单被选项的子项目。然而,这个三角通常默认为黑色,如果需要更改颜色,可以参考以下的CSS代码:
/* 定义一个自定义三角的类名 */ .custom-triangle { /* 设置宽高 */ width: 0; height: 0; /* 设置边框 */ border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #f00; /* 这里可以更改颜色值 */ } /* 使用伪元素添加三角形 */ .dropdown-menu::after { /* 设置内容为空,使得伪元素可以显示 */ content: ""; /* 定位 */ position: absolute; top: 13px; right: 10px; /* 添加刚才定义好的类名 */ /* 和这里要挑逗一下编译一下css,才会高亮 */ cursor: pointer; border-radius: 0; box-shadow: none; }
以上代码就是使用伪元素和边框技巧来实现的。通过伪元素的:before或者:after来添加一个空的元素,再通过边框的宽度和颜色来绘制一个三角形。
需要提醒一点的是,上面的这个例子使用的是绝对定位的方式,所以在使用时需要注意上下文的定位。
粉丝
0
关注
0
收藏
0