用css样式实现返回箭头

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

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

相关阅读

相关 css箭头

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h...

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

相关 CSS常用样式

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

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

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

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

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

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

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

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

相关 js返回css样式的color值

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

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

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

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

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

相关 ionic改变返回箭头样式

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

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

相关 CSS常用样式

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

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

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

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

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

相关 CSS常用样式

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

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