用css样式实现返回箭头

ゝ一纸荒年。 2021-09-18 03:42 803阅读 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 条评论，803人围观）

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

相关阅读

相关 css 手写返回箭头

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

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

相关 css箭头

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h...

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

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

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

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

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

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

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

相关 js返回css样式的color值

今天做百度前端学院的任务时，遇到了一个问题： -------------------- 耀耀学院任务二：任务描述 ![表单][task_2_30_1.jpg]

短命女/ 2022年06月17日 10:16/ 0 赞/ 510 阅读

相关实现 swiper 的左右箭头放到外面，定制箭头的样式

swiper 很好用，但是设计可不会按照 swiper 的样式给你设计图，一般情况下轮播图会有下面这种情况： swiper 本身的箭头在里面；而我们需要

梦里梦外;/ 2022年05月22日 06:48/ 0 赞/ 570 阅读

相关 ionic改变返回箭头样式

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

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

相关 CSS常用样式

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

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

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

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

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

相关 CSS常用样式

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

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