css实现三角形

1.实色边框的转角连接表现

(1)参考代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>三角形</title>
 7     <style>
 8 
 9         .box1 {
10             width: 10px;
11             height: 10px;
12             border: 10px solid;
13             border-color: purple pink skyblue greenyellow;
14             margin-bottom: 20px;
15         }
16 
17     </style>
18 </head>
19 
20 <body>
21 
22     <div class="box1"></div>
23 
24 </body>
25 
26 </html>

(2)效果展现

2.三个方向边框透明下的梯形效果

(1)参考代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>三角形</title>
 7     <style>
 8 
 9         /* (1)上梯形 */
10 
11         .box2 {
12             width: 10px;
13             height: 10px;
14             border: 10px solid;
15             border-color: purple transparent transparent;
16         }
17 
18         /* (2)下梯形 */
19 
20         .box3 {
21             width: 10px;
22             height: 10px;
23             border: 10px solid;
24             border-color: transparent transparent skyblue transparent;
25             margin-bottom: 20px;
26         }
27 
28         /* (3)左梯形 */
29 
30         .box4 {
31             width: 10px;
32             height: 10px;
33             border: 10px solid;
34             border-color: transparent transparent transparent greenyellow;
35             margin-bottom: 20px;
36         }
37 
38         /* (4)右梯形 */
39 
40         .box5 {
41             width: 10px;
42             height: 10px;
43             border: 10px solid;
44             border-color: transparent pink transparent transparent;
45             margin-bottom: 20px;
46         }
47 
48     </style>
49 </head>
50 
51 <body>
52 
53     <!-- 三个方向边框透明下的梯形效果 -->
54     <!-- (1)上梯形 -->
55     <div class="box2"></div>
56     <!-- (2)下梯形 -->
57     <div class="box3"></div>
58     <!-- (3)左梯形 -->
59     <div class="box4"></div>
60     <!-- (4)右梯形 -->
61     <div class="box5"></div>
62 
63 </body>
64 
65 </html>

(2)效果展现

3.三角形

(1)参考代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>三角形</title>
 7     <style>
 8 
 9         /* (1)朝上 */
10 
11         .box6 {
12             width: 0;
13             border: 10px solid;
14             border-color: transparent transparent skyblue;
15             margin-bottom: 20px;
16         }
17 
18         /* (2)朝下 */
19 
20         .box7 {
21             width: 0;
22             border: 10px solid;
23             border-color: purple transparent transparent;
24             margin-bottom: 15px;
25         }
26 
27         /* (3)朝左 */
28 
29         .box8 {
30             width: 0;
31             border: 10px solid;
32             border-color: transparent pink transparent transparent;
33             margin-bottom: 10px;
34         }
35 
36         /* (4)朝右 */
37 
38         .box9 {
39             width: 0;
40             border: 10px solid;
41             border-color:  transparent transparent transparent greenyellow;
42             margin-bottom: 20px;
43         }
44 
45     </style>
46 </head>
47 
48 <body>
49 
50     <!-- (1)朝上 -->
51     <div class="box6"></div>
52 
53     <!-- (2)朝下 -->
54     <div class="box7"></div>
55 
56     <!-- (3)朝左 -->
57     <div class="box8"></div>
58     
59     <!-- (4)朝右 -->
60     <div class="box9"></div>
61 
62 </body>
63 
64 </html>

(2)效果展现

4.更窄的三角图形

(1)参考代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>三角形</title>
 7     <style>
 8 
 9         .box10 {
10             width: 0;
11             border-width: 10px 20px;
12             border-style: solid;
13             border-color: purple transparent transparent;
14             margin-bottom: 20px;
15         }
16         
17     </style>
18 </head>
19 
20 <body>
21 
22     <div class="box10"></div>
23 
24 </body>
25 
26 </html>

(2)效果展现

5.一侧开口的三角形效果

(1)参考代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <title>三角形</title>
 7     <style>
 8 
 9         .box11 {
10             width: 0;
11             border-width: 10px 20px;
12             border-style: solid;
13             border-color:purple pink transparent transparent;
14         }
15 
16     </style>
17 </head>
18 
19 <body>
20 
21     <div class="box11"></div>
22 
23 </body>
24 
25 </html>

(2)效果展现

猜你喜欢