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

[html]  view plain  copy
  1. >  
  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 的两边是斜的但没想到可以这样来做尖角箭头,太厉害了

显示结果图:

可以加

position: absolute;
top: 50%;
margin-top: -10px;这个是border的width
margin-left: -5px;这个是border的一半widthleft: 50%;

最后可以写成--左箭头(朝哪的箭头就width为0,对边有颜色,邻边为transparent)

border-width:16px 16px 16px 0px;
border-color:transparent #fff;
border-style: solid;
position: absolute;
top: 50%;
margin-top: -16px;
margin-left: -8px;
left: 50%;

转自:http://blog.csdn.net/zhouzme/article/details/18909357


你可能感兴趣的:(css,项目)