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
时间： 2024-07-29 15:22:32