css_next箭头

效果图

在写页面的时候,能用css解决,咱就不用图片

实现原理:给块宽高,给块border-right,border-bottom,然后transform: rotate(-45deg)。

效果实现代码:

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <style type="text/css">
 8             .btn-next {
 9                 height: 10px;
10                 width: 10px;
11                 transform: rotate(-45deg);
12                 border-right: 2px solid #aaa;
13                 border-bottom: 2px solid #aaa;
14             }
15         </style>
16     </head>
17 
18     <body>
19         <div class="btn-next"></div>
20     </body>
21 
22 </html>
View Code

猜你喜欢

转载自www.cnblogs.com/wush-1215/p/9372574.html