【前端】通过CSS样式设置箭头图标

全栈小5
全栈领域优质创作者
博客专家认证
2023-03-09 14:18:19

1、箭头向右

img

<style>
.arrow-right{
    display:inline-block;
}

.arrow-right::before{
content:'';
display:inline-block;
width:0px;
height:0px;
border-style:solid;
border-width:20px;
border-color: transparent transparent transparent #099dff;
/*
    border-color:上边 右边 下边 左边
    transparent:表示透明的意思
*/
}
</style>
<div class="arrow-right"></div>

2、箭头向左

img

1)方式一,改为透明区域位置
右边不透明即可

border-color: transparent #099dff transparent transparent;

2)方式二,通过旋转

-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);

3、箭头向上和向下同上

img

img

/*上边设置颜色-向下箭头*/
border-color: #099dff transparent transparent transparent;
/*下边设置颜色-向上箭头*/
border-color: transparent transparent #099dff transparent;
...全文
393 回复 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

576

社区成员

发帖
与我相关
我的任务
社区描述
欢迎加入【基础知识小馆】,本小馆主要展示和分享大家记录的基础知识!帮助别人,成长你我!C#、.net core、Python、Java,Sql Server、mysql、oracle、Go等
javac#c语言 个人社区 广东省·广州市
社区管理员
  • 全栈小5
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧