css3画步骤条矩形向右箭头

要实现的效果如图：

代码如下：

<template><div class="page"><div class="title">我要开店</div><p style="padding-top:25px;">一个身份只能开一家店；开店后店铺无法注销；申请到正式开通预计需1-3个工作日。了解更多请看<el-button type="text">开店规则必看</el-button></p><div class="steps"><divv-for="(item,index) in process"class="step step_r":class="{active:($route.query.step || 1) == (index+1)}"><div style="position:absolute;right:-42px;height:80px;width:80px;overflow:hidden;"><div class="rotateBox"></div></div><div class="step_b"><div class="num">{{index+1}}</div><div class="info"><p class="up">{{item.step}}</p><p class="down">{{item.desc}}</p></div></div></div></div><div></div></div>
</template>

CSS代码如下：

<style lang='scss' scoped>
.page {height: 260px;width: 100%;.title {width: 105px;height: 37px;font-size: 26px;font-family: PingFangSC-Medium;font-weight: 500;color: #333333;line-height: 37px;padding: 34px 0;}.steps {width: 100%;display: flex;margin-top: 17px;zoom: 1;}.steps::after {content: ".";display: block;clear: both;visibility: hidden;font-size: 0;height: 0;line-height: 0;}.step {flex: 1;width: 320px;height: 80px;background: #E4F0FD;position: relative;.step_b {width: 230px;margin: 7px auto 7px 40px;display: flex;.num {width: 20px;height: 67px;font-size: 48px;font-family: PingFangSC-Regular;font-weight: 400;color: #666666;line-height: 67px;margin-right: 20px;}.info {height: 37px;margin-top: 15px;.up {width: 84px;height: 20px;font-size: 14px;font-family: PingFangSC-Regular;font-weight: 400;color: #666666;line-height: 20px;}.down {height: 17px;font-size: 12px;font-family: PingFangSC-Regular;font-weight: 400;color: #888888;line-height: 17px;}}}}//旋转的小方形盒子.rotateBox {content: "";border:10px solid #fff;border-bottom: none;border-left: none;background-color: #E4F0FD;height: 68px;width: 68px;position: absolute;display: block;top: 6px;right: 15px;z-index: 10;transform:rotate(45deg);}.step_l {margin-right: 0;}.active {background: #75B0DF !important;.num {color: #FFFFFF !important;}.up {color: #FFFFFF !important;}.down {color: #0E58AF !important;}}//被激活的步骤条的样式.active .rotateBox {background-color: #75B0DF;content: "";border: 10px solid #fff;border-bottom: none;border-left: none;height: 68px;width: 68px;position: absolute;display: block;top: 6px;right: 15px;z-index: 10;transform:rotate(45deg);// -ms-transform:rotate(45deg);  /* IE 9 */// -moz-transform:rotate(45deg);   /* Firefox */// -webkit-transform:rotate(45deg); /* Safari 和 Chrome */// -o-transform:rotate(45deg);   /* Opera */}//最后一步取消向右箭头.step:last-child .rotateBox{content: "";border: none;height: 0;width: 0;z-index: 11;}
}
</style>

css3画步骤条矩形向右箭头相关推荐

html画一条线并带箭头,手把手教你用CSS实现带箭头的流程进度条
本文介绍的是利用纯CSS的带箭头流程进度条,兼容到IE8,需要的朋友们下面来一起学习学习. 首先写出一个基本的样式. .cssNav li{ padding: 0px 20px; line-heigh ...
echarts 在两点之间画一条线_树的手绘很难画？分步骤教你画，简单易学，收藏起来临摹学习...
前景树--半树.角树画法半树与角树,在建筑手绘中常处于前景位置,其表现需尽量写意,形体概括,对比强烈,进而更好地引导与突出中景. (1)半树半树,顾名思义只需画出单棵树从树冠中下部到树根接地的位置 ...
css右箭头,css3 伪类实现右箭头→
css3 实现右箭头→ Document .divtest{ position: absolute; top: 100px; left: 100px; height: 3px; width: 10px ...
css3画一个三角形,css3 画三角形
/*箭头向上*/ .arrow-up { width:0; height:0; border-left:20px solid transparent; border-right:20px solid ...
纯CSS3画六角灯笼特效，详细教学
这个效果是我一个同事没事画着搞的. 我们先看效果, 不想看实现过程的,直接拉到最底下点击查看原文. 这是高清静态版: 起初,我就是想做一个节目中那样2D的卡通大红灯笼.在百度效果图的时候,发现了这种古 ...
纯CSS3画出小黄人并实现动画效果
前言前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分,最后才完成的动画效果.但是,其实我的 ...
步骤条的实现原理及AliceUI中步骤条Step的应用
导读本文主要介绍了步骤条的实现原理以及Alice UI 的步骤条step的使用方法. 基本原理首先看看从网上找的步骤条: 三种状态: 已经完成的状态(done) 当前正在进行的状态(current ...
第二章、小实例，画字，画线，矩形，画图，动画（iOS学习笔记，从零开始。）
源代码再此下载: http://download.csdn.net/detail/hherima/5108428 本博文主要讲如何绘制文字,绘制一条直线,绘制图片,给图片添加动画. 首先,创建一个Si ...
如何用viso画波浪线、以及带箭头的波浪线。
如何用viso画波浪线.带箭头的波浪线!!! 搜索过来搜索过去,还是没有找到一个令自己满意的答案,就自己写一个过程了. 首先我使用的是visio 2013版本. 方法一: 打开visio,新建一个基本 ...

css3画步骤条矩形向右箭头

css3画步骤条矩形向右箭头相关推荐

最新文章

热门文章

css3画步骤条 矩形向右箭头

css3画步骤条 矩形向右箭头相关推荐

最新文章

热门文章

css3画步骤条矩形向右箭头

css3画步骤条矩形向右箭头相关推荐