用css样式实现返回箭头

ゝ一纸荒年。 2021-09-18 03:42 852阅读 0赞

有问题可以扫码加我微信，有偿解决问题。承接小程序开发。

微信小程序开发学习交流qq群   581478349；

例图：

![20190225181054942.png][]

<view class='rt_pos'></view>

.rt_pos {
      position: absolute;
      right: 50rpx;
      top: 150rpx;
      content: "";
      display: inline-block;
      height: 20rpx;
      width: 20rpx;
      border-width: 0 6rpx 6rpx 0;
      border-color: #fff;
      border-style: solid;
      transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
      -webkit-transform: matrix(0.71, 0.71, -.71, 0.71, 0, 0);
    }

改变方向只需要改变border-width：

上箭头：border-width: 2px 0 0 2px;  
右箭头：border-width: 2px 2px 0 0;  
下箭头：border-width: 0 2px 2px 0;  
左箭头：border-width: 0 0 2px 2px;

承接小程序开发：v:![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70][]  q:![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1][]

[20190225181054942.png]: /images/20210724/2e6ac3d181764af5816bc9986e1b4189.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190225182013559.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjQxNTA0_size_16_color_FFFFFF_t_70 1]: /images/20210724/3823bb34491c4e1894e990eb9b89ad8e.png

发表评论取消回复

表情：

评论列表（有 0 条评论，852人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 手写返回箭头

因为在开发App时，为了自定义返回栏，返回箭头，一般都用图片，当图片不方便，最好用css样式实现。画出一个正方形，让它旋转45度，只显示你需要的两个边即可。

绝地灬酷狼/ 2024年04月22日 15:23/ 0 赞/ 70 阅读

相关 css箭头

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h...

﹏ヽ暗。殇╰゛Y/ 2024年04月17日 06:06/ 0 赞/ 70 阅读

相关 CSS常用样式

文章目录字体样式文本样式颜色 color 对齐方式 text-alogn 下划线、上划线、删除线

╰半橙微兮°/ 2023年10月12日 17:02/ 0 赞/ 28 阅读

相关 css实现左，右箭头按钮

先看效果图： ![20200102134720819.png][] 实现效果的css样式如下：  <div style="widt

ゞ浴缸里的玫瑰/ 2023年06月27日 03:12/ 0 赞/ 91 阅读

相关 css 常用样式

1.菜单变灰 / 灰的字体 / .font-gray{ color: ddd; } / 不能操作的 / .font-dis

た入场券/ 2023年02月18日 15:21/ 0 赞/ 12 阅读

相关 html向左箭头样式,html – CSS中的尖头/角度箭头样式边框

我正在制作面包屑菜单,并尝试在纯CSS中进行,因此我不必使用背景图像来获得箭头形状.是否有可能用纯CSS实现这种倾斜的边框风格？我能做的最好看起来就像这样(这只是我刚才做的

喜欢ヅ旅行/ 2022年10月07日 15:55/ 0 赞/ 99 阅读

相关 ionic改变返回箭头样式

1.定义图标在theme目录下创建icons.scss专门定义图标 .ion-ios-backwhite \{ content: url("../assets/img

迷南。/ 2022年05月08日 00:12/ 0 赞/ 280 阅读

相关 CSS常用样式

图片垂直居中 .img-box { height: 130px; line-height:130px; } im

墨蓝/ 2022年04月08日 08:59/ 0 赞/ 317 阅读

相关用css样式实现返回箭头

有问题可以扫码加我微信，有偿解决问题。承接小程序开发。微信小程序开发学习交流qq群 581478349；例图： ![20190225181054942.png]

ゝ一纸荒年。/ 2021年09月18日 03:42/ 0 赞/ 853 阅读

相关 CSS常用样式

文字： /*字体加粗*/ font-weight: bold; /*字体大小*/ font-size: 28px; /*修改字体*/ font-family: "隶书",...

朱雀/ 2021年05月03日 16:03/ 0 赞/ 667 阅读