美文网首页
纯css画双箭头

纯css画双箭头

作者: 如雨随行2020 | 来源:发表于2021-12-26 07:51 被阅读0次

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

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

效果图:



向右的两个箭头。具体使用:



同时修改这四个数值改变大小(箭头的长度)。

修改这个可以控制箭头的宽度。
然后颜色和方向不用我多说了吧。

相关文章

  • 纯css画双箭头

    不多说,直接上源码和效果图: 效果图: 向右的两个箭头。具体使用: 同时修改这四个数值改变大小(箭头的长度)。 修...

  • css 实现三角形箭头

    插入DOM 使用伪类 参考:用纯CSS实现的箭头CSS画三角形原理css整理 -- 右箭头,上下箭头,三角形 这个...

  • 纯css实现双箭头

    直接复制代码实现 1.样式 2.代码如下 我的第一个 HTML 页面 .brand_total{ box-shad...

  • 纯css写箭头

  • 纯CSS实现箭头案例

  • web前端特效演示合集

    前端特效01:使用纯CSS实现书籍3D翻页效果 前端特效02:使用纯CSS实现动态太极 前端特效03:HTML5画...

  • 纯css实现上下左右箭头

    啥都不说直接上代码 html: css代码: .box{ height:180px; width:320px; p...

  • 【转】用CSS画各种形状(一)

    本篇是以下两篇文章的转载和总结 纯CSS画基本形状用CSS画三角形,普通版,文艺小阴影版~ 1、画方形 2、画正圆...

  • 纯css动画实现箭头向右无限前进

    适用场景和效果描述:箭头线的宽度不定,箭头一直向右循环前进,且可随意设置颜色 原理: 背景设置渐变色,通过控制遮罩...

  • 各种纯css图标

    各种纯css图标 CSS3可以实现很多漂亮的图形,我收集了32种图形,在下面列出。直接用CSS3画出这些图形,要比...

网友评论

      本文标题:纯css画双箭头

      本文链接:https://www.haomeiwen.com/subject/nuyraltx.html