原理:画一个div，给div的宽高为0，给4个border属性，把其中三个隐藏就可以得到一个三角形。
很简单的一个原理，项目中可能很少用到，业余可以玩玩，其实前端蛮好玩的。可以实现各种各样的功能。
css:
1 .test1 {
2 width: 0;
3 height: 0;
4 border-right: 50px solid transparent;
5 border-bottom: 50px solid blue;
6 border-left: 50px solid transparent;
7 }
HTML:
1 <div class="test1"></div>
全部代码：
1 <!DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="UTF-8">
6 <title></title>
7 </head>
8 <!--/*1.css样式*/-->
9 <style type="text/css">
10 .test1 {
11 width: 0;
12 height: 0;
13 border-right: 50px solid transparent;
14 border-bottom: 50px solid blue;
15 border-left: 50px solid transparent;
16 }
17
18 .test2 {
19 width: 0;
20 height: 0;
21 border-top: 50px solid transparent;
22 border-bottom: 50px solid transparent;
23 border-left: 50px solid orange;
24 }
25
26 .test3 {
27 width: 0;
28 height: 0;
29 border-top: 50px solid black;
30 border-right: 50px solid transparent;
31 border-left: 50px solid transparent;
32 }
33
34 .test4 {
35 width: 0;
36 height: 0;
37 border-top: 50px solid transparent;
38 border-right: 50px solid red;
39 border-bottom: 50px solid transparent;
40 }
41 </style>
42
43 <body>
44 <!--2.html样式-->
45 <div class="test1"></div>
46 <div class="test2"></div>
47 <div class="test3"></div>
48 <div class="test4"></div>
49 </body>
50
51 </html>
2018年1月9日，今天小马哥变成我们的顾问了。不是再是我们的老大了。嗯，还可以吃一顿饭。
是不是要变的成熟点了，骚年。
原文地址：https://www.cnblogs.com/wush-1215/p/8253539.html
时间： 2024-10-11 14:10:00