• 104498

    文章

  • 803

    评论

  • 12

    友链

  • 最近新加了换肤功能,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

小程序如何利用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;
}

效果:

<view>
    <view class="right_arrow"></view>
    <view class="right_arrow"></view>
</view>

那么如何画其他方向的箭头呢?
修改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://blog.csdn.net/qq_22038259/article/details/84035674
https://blog.csdn.net/foreverling_ling/article/details/52796453
https://blog.csdn.net/danfengw/article/details/54140395



695856371Web网页设计师②群 | 喜欢本站的朋友可以收藏本站,或者加入我们大家一起来交流技术!

0条评论

Loading...


自定义皮肤 主体内容背景
打开支付宝扫码付款购买视频教程
遇到问题联系客服QQ:419400980
注册梁钟霖个人博客