css绘制三角形

bamboo2016

于 2015-12-22 22:25:00 发布

阅读量74

点赞数

原文链接：http://www.cnblogs.com/anchao/p/5068380.html

版权

　　今天，偶遇一个css绘制三角形的代码，用处很大哦，分享给大家，送上代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         .parent{
 8             width: 300px;
 9             height: 100px;
10             margin: 10px auto;
11             background-color: green;
12         }
13         .square{
14             width: 0;
15             height: 0;
16             border-bottom: 15px solid white;
17             border-left: 15px solid white;
18             border-right: 15px solid green;
19             border-top: 15px solid green;
20             position: relative;
21             left: -30px;
22             top: 20px;
23         }
24     </style>
25 </head>
26     <div class="parent">
27         <div class="square"></div>
28     </div>
2

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style type="text/css">
 7         .parent{
 8             width: 300px;
 9             height: 100px;
10             margin: 10px auto;
11             background-color: green;
12         }
13         .square{
14             width: 0;
15             height: 0;
16             border-bottom: 15px solid white;
17             border-left: 15px solid white;
18             border-right: 15px solid green;
19             border-top: 15px solid green;
20             position: relative;
21             left: -30px;
22             top: 20px;
23         }
24     </style>
25 </head>
26     <div class="parent">
27         <div class="square"></div>
28     </div>
29 </html>

　　我再firefox浏览器上得到如下效果，看官请看：

　　把content的区域设置成0*0，然后再利用border属性选取适当的变化就可以了；

转载于:https://www.cnblogs.com/anchao/p/5068380.html

bamboo2016

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css绘制三角形

　　今天，偶遇一个css绘制三角形的代码，用处很大哦，分享给大家，送上代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 ...
复制链接

扫一扫