Css+Div摘录集-生成小三角常用方法

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <title>几种生成小三角常用方法</title>
  5     <style type="text/css">
  6         * { padding: 0px; margin: 0px; }
  7         .fangfa1 span { margin-top: 10px; }
  8         .s1 { display: block; width: 0px; height: 0px; border-top: 20px solid #f60909; border-right: 20px solid #32ee05; border-bottom: 20px solid #0645f5; border-left: 20px solid #c909e6; }
  9         .s2 { display: block; width: 0px; height: 0px; border-top: 20px dashed #f60909; border-right: 20px dashed #32ee05; border-bottom: 20px dashed #0645f5; border-left: 20px dashed #c909e6; }
 10         .s3 { display: block; width: 0px; height: 0px; border-top: 20px dotted #f60909; border-right: 20px dotted #32ee05; border-bottom: 20px dotted #0645f5; border-left: 20px dotted #c909e6; }
 11         .s4 { display: block; width: 0px; height: 0px; border-top: 20px double #f60909; border-right: 20px double #32ee05; border-bottom: 20px double #0645f5; border-left: 20px double #c909e6; }
 12         .s5 { display: block; width: 0px; height: 0px; border-top: 20px groove #f60909; border-right: 20px groove #32ee05; border-bottom: 20px groove #0645f5; border-left: 20px groove #c909e6; }
 13         .s6 { display: block; width: 0px; height: 0px; border-top: 20px hidden #f60909; border-right: 20px hidden #32ee05; border-bottom: 20px hidden #0645f5; border-left: 20px hidden #c909e6; }
 14         .s7 { display: block; width: 0px; height: 0px; border-top: 20px inset #f60909; border-right: 20px inset #32ee05; border-bottom: 20px inset #0645f5; border-left: 20px inset #c909e6; }
 15         .s8 { display: block; width: 0px; height: 0px; border-top: 20px medium #f60909; border-right: 20px medium #32ee05; border-bottom: 20px medium #0645f5; border-left: 20px medium #c909e6; }
 16         .s9 { display: block; width: 0px; height: 0px; border-top: 20px outset #f60909; border-right: 20px outset #32ee05; border-bottom: 20px outset #0645f5; border-left: 20px outset #c909e6; }
 17         .s10 { display: block; width: 0px; height: 0px; border-top: 20px ridge #f60909; border-right: 20px ridge #32ee05; border-bottom: 20px ridge #0645f5; border-left: 20px ridge #c909e6; }
 18         .s11 { display: block; width: 0px; height: 0px; border-top: 20px thick #f60909; border-right: 20px thick #32ee05; border-bottom: 20px thick #0645f5; border-left: 20px thick #c909e6; }
 19         .s12 { display: block; width: 0px; height: 0px; border-top: 20px thin #f60909; border-right: 20px thin #32ee05; border-bottom: 20px thin #0645f5; border-left: 20px thin #c909e6; }
 20         .top { display: block; width: 0px; height: 0px; border-top: 20px dashed transparent; border-right: 20px dashed transparent; border-bottom: 20px dashed #0645f5; border-left: 20px dashed transparent; }
 21         .right { display: block; width: 0px; height: 0px; border-top: 20px dashed transparent; border-right: 20px dashed transparent; border-bottom: 20px dashed transparent; border-left: 20px dashed #c909e6; }
 22         .bottom { display: block; width: 0px; height: 0px; border-top: 20px dashed #f60909; border-right: 20px dashed transparent; border-bottom: 20px dashed transparent; border-left: 20px dashed transparent; }
 23         .left { display: block; width: 0px; height: 0px; border-top: 20px dashed transparent; border-right: 20px dashed #32ee05; border-bottom: 20px dashed transparent; border-left: 20px dashed transparent; }
 24 
 25         .lingxing1 { width: 60px; height: 60px; overflow: hidden; position: relative; margin-top: 10px; }
 26         .lingxing1 span { position: absolute; font-size: 60px; color: #484545; top: 0px; left: 0px; }
 27         .lingxing2 { width: 60px; height: 60px; overflow: hidden; position: relative; margin-top: 10px; }
 28         .lingxing2 span { position: absolute; font-size: 60px; color: #484545; top: 30px; left: 0px; }
 29         .lingxing3 { width: 60px; height: 60px; overflow: hidden; position: relative; margin-top: 10px; }
 30         .lingxing3 span { position: absolute; font-size: 60px; color: #484545; top: 0px; left: -30px; }
 31         .lingxing4 { width: 60px; height: 60px; overflow: hidden; position: relative; margin-top: 10px; }
 32         .lingxing4 span { position: absolute; font-size: 60px; color: #484545; top: -30px; left: 0px; }
 33         .lingxing5 { width: 60px; height: 60px; overflow: hidden; position: relative; margin-top: 10px; }
 34         .lingxing5 span { position: absolute; font-size: 60px; color: #484545; top: 0px; left: 30px; }
 35 
 36         .lingxing6 { width: 60px; height: 60px; overflow: hidden; position: relative; margin-top: 10px; }
 37         .lingxing6 .l1 { position: absolute; font-size: 60px; left: 0px; top: 0px; color: #484545; }
 38         .lingxing6 .l2 { position: absolute; font-size: 60px; left: 0px; top: 2px; color: #ffffff; }
 39         .lingxing7 { width: 60px; height: 60px; overflow: hidden; position: relative; margin-top: 10px; }
 40         .lingxing7 .l1 { position: absolute; font-size: 60px; left: 0px; top: 0px; color: #484545; }
 41         .lingxing7 .l2 { position: absolute; font-size: 60px; left: -2px; top: 0px; color: #ffffff; }
 42         .lingxing8 { width: 60px; height: 60px; overflow: hidden; position: relative; margin-top: 10px; }
 43         .lingxing8 .l1 { position: absolute; font-size: 60px; left: 0px; top: 0px; color: #484545; }
 44         .lingxing8 .l2 { position: absolute; font-size: 60px; left: 0px; top: -2px; color: #ffffff; }
 45         .lingxing9 { width: 60px; height: 60px; overflow: hidden; position: relative; margin-top: 10px; }
 46         .lingxing9 .l1 { position: absolute; font-size: 60px; left: 0px; top: 0px; color: #484545; }
 47         .lingxing9 .l2 { position: absolute; font-size: 60px; left: 2px; top: 0px; color: #ffffff; }
 48     </style>
 49 </head>
 50 <body>
 51     <div class="fangfa1">
 52         <!-- 1种boder -->
 53         <span class="s1"></span>
 54         <span class="s2"></span>
 55         <span class="s3"></span>
 56         <span class="s4"></span>
 57         <span class="s5"></span>
 58         <span class="s6"></span>
 59         <span class="s7"></span>
 60         <span class="s8"></span>
 61         <span class="s9"></span>
 62         <span class="s10"></span>
 63         <span class="s11"></span>
 64         <span class="s12"></span>
 65         <!-- 在实际运用中，你想要哪个方向的小图标你就设置相反方向的border样式，其他方向的的样式透明度设置为transparent就行了如下 -->
 66         <span class="top"></span>
 67         <span class="right"></span>
 68         <span class="bottom"></span>
 69         <span class="left"></span>
 70     </div>
 71 
 72     <!-- 第二种方法特殊符号菱形 - ◆-->
 73     <div class="lingxing1">
 74         <span>◆</span>
 75     </div>
 76     <div class="lingxing2">
 77         <span>◆</span>
 78     </div>
 79     <div class="lingxing3">
 80         <span>◆</span>
 81     </div>
 82     <div class="lingxing4">
 83         <span>◆</span>
 84     </div>
 85     <div class="lingxing5">
 86         <span>◆</span>
 87     </div>
 88 
 89     <!-- 另外一种应用 -->
 90     <div class="lingxing6">
 91         <span class="l1">◆</span>
 92         <span class="l2">◆</span>
 93     </div>
 94     <div class="lingxing7">
 95         <span class="l1">◆</span>
 96         <span class="l2">◆</span>
 97     </div>
 98     <div class="lingxing8">
 99         <span class="l1">◆</span>
100         <span class="l2">◆</span>
101     </div>
102     <div class="lingxing9">
103         <span class="l1">◆</span>
104         <span class="l2">◆</span>
105     </div>
106     <!-- 第三种方法最简单不介绍 图片法 兼容所有浏览-->
107 </body>
108 </html>
posted on 2014-09-23 14:53 流浪小白鼠阅读(241) 评论(0) 收藏举报