设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 596|回复: 0

[HTML/CSS] css直接写出小三角

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2554
发表于 2014-8-9 11:45:26 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
css直接写出小三角
本文关键字词:css,css三角,after,伪元素

在开发移动端项目时,总是遇到很多小三角,之前一直用图片,感觉好麻烦,今天尝试了直接用CSS写出小三角!
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>css直接写出小三角</title>
  6. <style type="text/css">
  7. div{margin-bottom:20px;}
  8. /*箭头向上*/
  9. .arrow-up{width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:30px solid #000;}
  10. /*箭头向下*/
  11. .arrow-down{width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-top:30px solid #000;}
  12. /*箭头向左*/
  13. .arrow-left{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-right:30px solid #000;}
  14. /*箭头向右*/
  15. .arrow-right{width:0;height:0;border-top:30px solid transparent;border-bottom:30px solid transparent;border-left:30px solid #000;}
  16. /*:after 伪元素在元素之后添加内容实现小三角*/
  17. .box{width:300px;height:300px;background:#838383;position:relative;}
  18. .box:after{position:absolute;right:-20px;top:10px;display:block;content:"";width:0;height:0;border-top:20px solid transparent;border-bottom:20px solid transparent;border-left:20px solid #838383;}
  19. </style>
  20. </head>
  21. <body>
  22. <div class="arrow-up">
  23. <!--向上的三角-->
  24. </div>
  25. <div class="arrow-down">
  26. <!--向下的三角-->
  27. </div>
  28. <div class="arrow-left">
  29. <!--向左的三角-->
  30. </div>
  31. <div class="arrow-right">
  32. <!--向右的三角-->
  33. </div>
  34. <div class="box">
  35. :after 伪元素在元素之后添加内容实现小三角
  36. </div>
  37. </body>
  38. </html>
复制代码
效果演示截图:
效果演示.jpg
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-4 14:09

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表