css_画一个三角形

Posted wush-1215

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css_画一个三角形相关的知识,希望对你有一定的参考价值。

原理:画一个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>
View Code

 

2018年1月9日,今天小马哥变成我们的顾问了。不是再是我们的老大了。嗯,还可以吃一顿饭。

是不是要变的成熟点了,骚年。

以上是关于css_画一个三角形的主要内容,如果未能解决你的问题,请参考以下文章

解释下用div+css画三角形的原理.代码:

用CSS画一个带阴影的三角形的示例代码

CSS画三角形

用CSS画一个三角形

Effective前端3:用CSS画一个三角形

Effective前端3:用CSS画一个三角形