阅读 31

小程序如何利用CSS画出箭头

小程序如何利用CSS画出箭头

如题,小程序空间有限,为了省图片,我们可以用wxss画箭头,这里画的是向下的箭头。

源码如下:

.right_arrow {
  height: 20rpx;
  line-height: 20rpx;
  position: relative;
  z-index: 4;
}
.right_arrow:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 2rpx;
  right: 0;
  width: 0;
  height: 0;
  border: 15rpx solid;
  margin-top: -15rpx;
  border-color: rgb(184, 107, 62) transparent transparent transparent ;
}

.right_arrow:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 50%;
  right: 0;
  width: 0;
  height: 0;
  border: 15rpx solid;
  margin-top: -15rpx;
  border-color: rgba(255, 255, 255, 1) transparent transparent transparent;
}

效果:


    
    

那么如何画其他方向的箭头呢?
修改before和after里的下面这一行即可,其他的自己适配:

border-color: rgba(255, 255, 255, 1) transparent transparent transparent;

比如画向右的箭头:

.right_arrow {
  height: 20rpx;
  line-height: 20rpx;
  position: relative;
  padding: 18rpx;
  z-index: 4;
}
.right_arrow:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 0;
  height: 0;
  border: 15rpx solid;
  margin-top: -15rpx;
  border-color: transparent transparent transparent rgba(255, 140, 0, 1);
}

.right_arrow:after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 4rpx;
  width: 0;
  height: 0;
  border: 15rpx solid;
  margin-top: -15rpx;
  border-color: transparent transparent transparent rgba(255, 255, 255, 1);
}

参考:


原文:https://www.cnblogs.com/bugutian/p/12939410.html

文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐