css空箭头的样式

最新推荐文章于 2024-05-13 09:53:40 发布

xlb_123

最新推荐文章于 2024-05-13 09:53:40 发布

阅读量871

点赞数

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

本文链接：https://blog.csdn.net/qq736150416/article/details/51991955

版权

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:

最低0.47元/天解锁文章

xlb_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css空箭头的样式

css绘制空心和实心箭头，网上搜到好多实心箭头，很少有空心的，今天整理了一下：实心的箭头比较好写，空心的箭头，要用2个样式去叠加显示，最外层背景是白色的，里面一层的背景色就是箭头的要显示的颜色，通过位移来设置箭头宽度。效果：html代码：html lang="en">head> meta charset="UTF-8"> title>鼠标滑过显示隐藏层title>
复制链接

扫一扫