css空箭头的样式

最新推荐文章于 2024-06-22 09:56:05 发布

xlb_123

最新推荐文章于 2024-06-22 09:56:05 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发 css相关文章标签： css 空心上下左右箭头实心上下左右箭头

本文链接：https://blog.youkuaiyun.com/qq736150416/article/details/51991955

web前端开发同时被 2 个专栏收录

153 篇文章

订阅专栏

css相关

33 篇文章

订阅专栏

本文介绍如何使用CSS实现空心和实心的上下左右箭头。通过结合使用伪元素`before`和`after`，并利用边框技巧，可以创建出不同方向的箭头。空心箭头利用了两个叠加的样式，外层背景为白色，内层背景为箭头颜色，通过位移调整箭头形状。示例代码包括了向上、向下、向左和向右四种箭头的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css绘制空心和实心箭头，网上搜到好多实心箭头，很少有空心的，今天整理了一下：
实心的箭头比较好写，
空心的箭头，要用2个样式去叠加显示，最外层背景是白色的，里面一层的背景色就是箭头的要显示的颜色，通过位移来设置箭头宽度。
效果：

html代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标滑过显示隐藏层</title>
    <style>
     div{
          margin-bottom:20px;
     }
     span{
         padding: 0 ;
         margin: 0;
     }
     h1{ color: blue;}
     /*空心箭头样式开始*/
     .jt_top:before{
         content: "";
         position: relative;
         width: 0;
         height: 0;
         border-left: 20px solid transparent;
         border-right: 20px solid transparent;
         border-bottom: 20px solid white;/*最外层的before的背景色必须透明，*/
         z-index: 1;/*最上面的层盖住after*/
     }
     .jt_top:after{
         content: "";
         position: relative;
         left: -40px;/*设置after的位置，位于before的后面，用after的背景色来形成箭头*/
         top: -3px;/*top控制箭头显示的宽度*/
         width: 0;
         height: 0;
         border-left: 20px solid transparent;
         border-right: 20px solid transparent;
         border-bottom: 20px solid green;/*//箭头颜色*/
     }
     .jt_bottom:before{
         content: "";
         position: relative;
         width: 0;
         height: 0;
         border-left: 20px solid transparent;
         border-right: 20px solid transparent;
         border-top: 20px solid white;
         z-index: 1;
     }
     .jt_bottom:after{
         content: "";
         position: relative;
         left: -40px;
         top: 4px;
         width: 0;
         height: 0;
         border-left: 20px solid transparent;
         border-right: 20px solid transparent;
         border-top: 20px solid green;
     }
     .jt_left:before{
         content: "";
         float:left;
         position: relative;
         width: 0;
         height: 0;
         border-top:20px solid transparent;
         border-bottom: 20px solid transparent;
         border-right:20px solid white;
         z-index: 1;
     }
     .jt_left:after{
        content: "";
         float:left;
         position: relative;
         left: -24px;
         top:0px;
         width: 0;
         height: 0;
         border-top:20px solid transparent;
         border-bottom:20px solid transparent;
         border-right:20px solid green;
     }
     .jt_right:before{
              content: "";
              float:left;
              position: relative;
              width: 0;
              height: 0;
              border-top:20px solid transparent;
              border-bottom: 20px solid transparent;
              border-left:20px solid white;
              z-index: 1;
          }
     .jt_right:after{
         content: "";
         float:left;
         position: relative;
         left: -16px;
         top:0px;
         width: 0;
         height: 0;
         border-top:20px solid transparent;
         border-bottom:20px solid transparent;
         border-left:20px solid green;
     }
     /*空心箭头样式结束*/
     .jt_top_01{
         content: "";
         position: relative;
         width: 0;
         height: 0;
         border-left: 20px solid transparent;
         border-right: 20px solid transparent;
         border-bottom: 20px solid green;/*最外层的before的背景色必须透明，*/
     }
     .jt_bottom_01{
         content: "";
         position: relative;
         width: 0;
         height: 0;
         border-left: 20px solid transparent;
         border-right: 20px solid transparent;
         border-top: 20px solid green;
     }

     .jt_left_01{
         content: "";
         float:left;
         position: relative;
         width: 0;
         height: 0;
         border-top:20px solid transparent;
         border-bottom: 20px solid transparent;
         border-right:20px solid green;
     }

     .jt_right_01{
         content: "";
         float:left;
         position: relative;
         width: 0;
         height: 0;
         border-top:20px solid transparent;
         border-bottom: 20px solid transparent;
         border-left:20px solid green;
     }
    </style>
</head>
<body>
<h1>空心箭头</h1>
<div>向上的箭头：</div> <span class="jt_top"></span><br/><br/><br/>
<div>向上的箭头： </div><span class="jt_bottom"></span><br/><br/><br/>
<div>向左的箭头：</div><span class="jt_left"></span><br/><br/><br/>
<div>向右的箭头： </div><span class="jt_right"></span>
<br/><br/>
<h1>实心箭头</h1>
<div>向上的箭头：</div> <span class="jt_top_01"></span><br/><br/><br/>
<div>向上的箭头： </div><span class="jt_bottom_01"></span><br/><br/><br/>
<div>向左的箭头：</div><span class="jt_left_01"></span><br/><br/><br/>
<div>向右的箭头： </div><span class="jt_right_01"></span>
</body>
</html>