纯css画双箭头

不多说,直接上源码和效果图:

.right_arrow {
  height: 20rpx;
  line-height: 20rpx;
  position: relative;
  padding: 18rpx;
  z-index: 4;
}

.sec_arrow {
  margin-left: -28rpx;
  z-index: 0;
}

/*箭头的三角形   */

.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);
}

效果图:
在这里插入图片描述
向右的两个箭头。具体使用:
在这里插入图片描述
同时修改这四个数值改变大小(箭头的长度)。
在这里插入图片描述
修改这个可以控制箭头的宽度。
然后颜色和方向不用我多说了吧。

猜你喜欢

转载自blog.csdn.net/qq_22038259/article/details/84035674
今日推荐