纯css做三角形形状

复制代码
 1 /* create an arrow that points up */
 2 div.arrow-up {
 3   width:0px;
 4   height:0px;
 5   border-left:5px solid transparent;  /* left arrow slant */
 6   border-right:5px solid transparent; /* right arrow slant */
 7   border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
 8   font-size:0px;
 9   line-height:0px;
10 }
11  
12 /* create an arrow that points down */
13 div.arrow-down {
14   width:0px;
15   height:0px;
16   border-left:5px solid transparent;
17   border-right:5px solid transparent;
18   border-top:5px solid #2f2f2f;
19   font-size:0px;
20   line-height:0px;
21 }
22  
23 /* create an arrow that points left */
24 div.arrow-left {
25   width:0px;
26   height:0px;
27   border-bottom:5px solid transparent;  /* left arrow slant */
28   border-top:5px solid transparent; /* right arrow slant */
29   border-right:5px solid #2f2f2f; /* bottom, add background color here */
30   font-size:0px;
31   line-height:0px;
32 }
33  
34 /* create an arrow that points right */
35 div.arrow-right {
36   width:0px;
37   height:0px;
38   border-bottom:5px solid transparent;  /* left arrow slant */
39   border-top:5px solid transparent; /* right arrow slant */
40   border-left:5px solid #2f2f2f; /* bottom, add background color here */
41   font-size:0px;
42   line-height:0px;
43 }
复制代码

 

posted @   远方的远方  阅读(331)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· SQL Server 2025 AI相关能力初探
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
点击右上角即可分享
微信分享提示