纯 CSS 实现三角形尖角箭头的实例

于 2017-06-15 11:32:57 发布
阅读量472 收藏 2
点赞数
分类专栏： css html
本文介绍了一种仅使用CSS创建各种方向箭头的方法，包括向上、向下、向左及向右箭头，并提供了完整的代码示例。这种方法通过巧妙地利用边框样式实现，便于调整箭头大小和颜色。

上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法

http://blog.youkuaiyun.com/zhouzme/article/details/18901943

，但没有怎么用上，也没有详细完整的实例，今天刚好要用上，整理了下，写个完整的代码：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <style type="text/css">  
  7. .area {  
  8.     margin:100px auto;  
  9.     width:300px;   
  10.     height: 150px;   
  11. }  
  12. .item {  
  13.     float:left; clear:both;  
  14.     margin-bottom:23px;  
  15. }  
  16. /* 向上的箭头 */  
  17. .dot-top {  
  18.     font-size: 0;  
  19.     line-height: 0;  
  20.     border-width: 10px;  
  21.     border-color: red;  
  22.     border-top-width: 0;  
  23.     border-style: dashed;  
  24.     border-bottom-style: solid;  
  25.     border-left-color: transparent;  
  26.     border-right-color: transparent;  
  27. }  
  28. /* 向右的箭头 */  
  29. .dot-right {  
  30.     font-size: 0;  
  31.     line-height: 0;  
  32.     border-width: 10px;  
  33.     border-color: red;  
  34.     border-right-width: 0;  
  35.     border-style: dashed;  
  36.     border-left-style: solid;  
  37.     border-top-color: transparent;  
  38.     border-bottom-color: transparent;  
  39. }  
  40. /* 向下的箭头 */  
  41. .dot-bottom {  
  42.     font-size: 0;  
  43.     line-height: 0;  
  44.     border-width: 10px;  
  45.     border-color: red;  
  46.     border-bottom-width: 0;  
  47.     border-style: dashed;  
  48.     border-top-style: solid;  
  49.     border-left-color: transparent;  
  50.     border-right-color: transparent;  
  51. }  
  52. /* 向左的箭头 */  
  53. .dot-left {  
  54.     font-size: 0;  
  55.     line-height: 0;  
  56.     border-width: 10px;  
  57.     border-color: red;  
  58.     border-left-width: 0;  
  59.     border-style: dashed;  
  60.     border-right-style: solid;  
  61.     border-top-color: transparent;  
  62.     border-bottom-color: transparent;  
  63. }  
  64. </style>  
  65. </head>  
  66.                                  
  67. <body>  
  68. <div class="area">  
  69.     <span class="item dot-top"></span>  
  70.     <span class="item dot-right"></span>  
  71.     <span class="item dot-bottom"></span>  
  72.     <span class="item dot-left"></span>  
  73. </div>  
  74. </body>  
  75. </html>  

可以通过设置 border-width 来调整箭头的大小，这样就不需要每次都去做图了，非常方便，颜色可以随时调整，真佩服那位老兄，以前虽然也发现 border 的两边是斜的但没想到可以这样来做尖角箭头，太厉害了

显示结果图：

转载自http://blog.youkuaiyun.com/zhouzme/article/details/18909357

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值