border实现三角箭头

 1 <!DOCTYPE html>
 2 <html>
 3 <title> 边框属性实现三角箭头及其原理</title>
 4 <meta  charset="utf-8" />
 5 <head>
 6 <style>
 7 #demo { border: 10px solid #333; border-left-color: #f00;  width: 10px; height: 10px; /*border-color:#333 transparent transparent ;*/ }
 8 #demo2 { border: 10px solid transparent; border-left-color: #f00;  width: 0; height: 0; }
 9 #demo3 { border: 10px solid transparent; border-top-color: #f00;  width: 0; height: 0; }
10 #demo4 { border: 10px solid transparent; border-bottom-color: #f00;  width: 0; height: 0; }
11 #demo5 {border-width:0 6px 6px; border-style:dashed dashed solid; border-color:transparent transparent #555}
12 #demo6 {border-width: 16px; border-style:solid; border-color:transparent transparent #555}
13 </style>
14 
15 </head>
16 <body>
17 
18 <h3>边框属性实现三角箭头及其原理</h3>
19 <p>基本原理<br>原理非常简单,通过截取border(边框)的部分“拐角”实现,几行CSS代码即可理解:<br>
20 一个梯形<br>当元素宽、高和边框的宽相近(等)时,改变某一边的颜色可以看到一个梯形;</p>
21 <p id="demo"><p>
22 
23 <h3>一个三角形,当元素宽、高为零,且其他边为透明颜色时,可以形一个三角形。</h3>
24 <p id="demo2"><p>
25 
26 <h3>把它变成往下的三角</h3>
27 <p id="demo3"><p>
28 
29 <h3>同理把它变成往上的三角</h3>
30 <p id="demo4"><p>
31 
32 <h3>其他一些方法:如下(需要注意的时,这里的实现方法是没有使用width和height属性的)</h3>
33 <i id="demo5"></i>
34 
35 <h3>改变点css: 体会,实现三角的重点属性是border-color的属性</h3>
36 <i id="demo6"></i>
37 
38 
39 </body>
40 </html> 
41             

 

posted on 2015-05-25 11:56  张小国  阅读(1240)  评论(0编辑  收藏  举报

导航