小三角形的制作 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7 
 8         三角形的麻烦方法
 9         .c1{
10             border-top: 30px solid rebeccapurple ;
11             border-left: 30px solid chartreuse ;
12             border-bottom: 0px solid red;
13             border-right:30px solid aquamarine ;
14             display: inline-block;
15         }
16 
17         .c1{
18             小三角形
19             border: 30px solid transparent;  透明色
20         
21             border-top: 30px solid #FF5809;
22             display: inline-block;
23         }
24 
25     </style>
26 </head>
27 <body>
28 <div class="c1"></div>
29 
30 </body>

 

执行代码后的样子：

posted @ 2016-07-05 11:42  WrYcF  阅读(247)  评论(0)    收藏  举报
Live2D