注意目录和修改相同的字符编码

制作小三角方法

一、利用:after伪元素制作

效果：

代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             .trangle{
 8                 width: 170px;
 9                 height: 30px;
10                 cursor: pointer;
11                 white-space: normal;
12                 display: block;
13             }
14             .trangle:after {
15                 content: "\25bc";
16                 color:#999;
17                 padding-left:100px;
18             }
19         </style>
20     </head>
21     <body>
22         <div class="range">
23             <span class="trangle">三角形</span>
24             <span class="trangle">三角形</span>
25             <span class="trangle">三角形</span>
26         </div>
27     </body>
28 </html>
:after制作小三角

二、利用border

动态效果：（鼠标滑过会旋转）

代码一：设置除border-top外，其它三个边框为白色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div {
 8             width: 0;
 9             height: 0;
10             border:10px solid white;
11             border-top-color:gray;
12             transition:all 1s ease 0s;
13         }
14         div:hover{transform:rotate(180deg);}
15     </style>
16 </head>
17 <body>
18         <div></div>
19 </body>
20 </html>

代码二：

设置border-color为透明

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div {
 8             width: 0;
 9             height: 0;
10             border-width: 3px;
11             border-style: solid;
12             border-color: #4D4D4D transparent transparent;
13              transition:all 1s ease 0.1s;
14         }
15         div:hover{transform:rotate(180deg);}
16     </style>
17 </head>
18 <body>
19         <div></div>
20 </body>
21 </html>

 

posted @ 2019-08-21 16:42  黑使  阅读(313)  评论(0)  编辑  收藏  举报