CSS--箭头
Posted 大亮头
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS--箭头相关的知识，希望对你有一定的参考价值。
原理：
利用边框颜色覆盖（块级标签内联）的效果，取部分图案：如果把一侧的border去掉，还能形成半角。
代码：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .arrow{ display: inline-block; border-top: 10px solid black; border-right: 10px solid red; border-bottom: 10px solid pink; border-left: 10px solid blue; /*想要哪边箭头，直接把另外三边的颜色改成透明:transparent.*/ } </style></head><body> <div class="arrow"></div></body></html> |
效果：?
半角：
1 2 3 4 5 6 7 8 | .arrow{ display: inline-block; border-top: 10px solid black; /*border-right: 10px solid transparent;*/ border-bottom: 10px solid transparent; border-left: 10px solid transparent; /*想要哪边箭头，直接把另外三边的颜色改成透明:transparent.*/} |
半角效果?：
以上是关于CSS--箭头的主要内容，如果未能解决你的问题，请参考以下文章