温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么用CSS绘制三角形箭头图案

发布时间:2021-08-12 10:33:59 来源:亿速云 阅读:212 作者:chen 栏目:web开发

这篇文章主要介绍“怎么用CSS绘制三角形箭头图案”,在日常操作中,相信很多人在怎么用CSS绘制三角形箭头图案问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用CSS绘制三角形箭头图案”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

CSS代码

CSS Code复制内容到剪贴板

  1. /* create an arrow that points up */  

  2. div.arrow-up {   

  3.  width: 0;    

  4.  height: 0;    

  5.  border-left5px solid transparent;  /* left arrow slant */  

  6.  border-right5px solid transparent/* right arrow slant */  

  7.  border-bottom5px solid #2f2f2f/* bottom, add background color here */  

  8.  font-size: 0;   

  9.  line-height: 0;   

  10. }   

  11.   

  12. /* create an arrow that points down */  

  13. div.arrow-down {   

  14.  width: 0;    

  15.  height: 0;    

  16.  border-left5px solid transparent;   

  17.  border-right5px solid transparent;   

  18.  border-top5px solid #2f2f2f;   

  19.  font-size: 0;   

  20.  line-height: 0;   

  21. }   

  22.   

  23. /* create an arrow that points left */  

  24. div.arrow-left {   

  25.  width: 0;    

  26.  height: 0;    

  27.  border-bottom5px solid transparent;  /* left arrow slant */  

  28.  border-top5px solid transparent/* right arrow slant */  

  29.  border-right5px solid #2f2f2f/* bottom, add background color here */  

  30.  font-size: 0;   

  31.  line-height: 0;   

  32. }   

  33.   

  34. /* create an arrow that points right */  

  35. div.arrow-rightright {   

  36.  width: 0;    

  37.  height: 0;    

  38.  border-bottom5px solid transparent;  /* left arrow slant */  

  39.  border-top5px solid transparent/* right arrow slant */  

  40.  border-left5px solid #2f2f2f/* bottom, add background color here */  

  41.  font-size: 0;   

  42.  line-height: 0;   

  43. }   

绘制这些三角形的关键在于,你要让箭头所指方向的两个侧边有很粗的边框。而背向箭头方向的一边也是同样粗的边框,而这条边的颜色就是你的三角形的颜色。边框越粗,三角形越大。用这种方法你可以绘制出各种颜色、各种大小、各种朝向的箭头。最妙的是,你只需要几行CSS代码就能实现这种效果。

使用:before和:after绘制CSS三角形

上面的CSS例子使用的是真正的页面元素进行绘制,但有时候这个真正的元素还有它用,你不能走上面直接进行操作,这是怎么办?纯CSS的三角形其实还可以使用伪元素(pseudo-element)进行绘制。下面就是绘制方法:

CSS Code复制内容到剪贴板

  1. div.tooltip {   

  2.  /* tooltip content styling in here; nothing to do with arrows */  

  3. }   

  4.   

  5. /* shared with before and after */  

  6. div.tooltip:before, div.tooltip:after {   

  7.  content' ';   

  8.  height: 0;   

  9.  positionabsolute;   

  10.  width: 0;   

  11.  border10px solid transparent/* arrow size */  

  12. }   

  13.   

  14. /* these arrows will point up */  

  15.   

  16. /* top-stacked, smaller arrow */  

  17. div.tooltip:before {   

  18.  border-bottom-color#fff;  /* arrow color */  

  19.   

  20.  /* positioning */  

  21.  positionabsolute;   

  22.  top: -19px;   

  23.  left255px;   

  24.  z-index: 2;   

  25. }   

  26.   

  27. /* arrow which acts as a background shadow */  

  28. div.tooltip:after {   

  29.  border-bottom-color#333;  /* arrow color */  

  30.   

  31.  /* positioning */  

  32.  positionabsolute;   

  33.  top: -24px;   

  34.  left255px;   

  35.  z-index: 1;   

  36. }   

背向箭头的那一侧的边框的颜色就是三角形箭头的颜色。画这个箭头并不需要同时使用:before和:after两个伪元素——一个就够了。而另外一个,你可以把它用作前一个的背景阴影或背景边。

到此,关于“怎么用CSS绘制三角形箭头图案”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css
AI