阶段式箭头样式

最新推荐文章于 2021-06-18 02:46:12 发布

心若向阳(*￣︶￣)

最新推荐文章于 2021-06-18 02:46:12 发布

阅读量220

点赞数

分类专栏：个人项目文章标签： css

本文链接：https://blog.csdn.net/agua001/article/details/107517537

版权

个人项目专栏收录该内容

144 篇文章 5 订阅

订阅专栏

需求，UI图所示：
第一种状态
在这里插入图片描述
第二种状态

第三种状态

html代码：

<ul class="arrowBox">
 <li class="arrow">
    <span>
        第一步
    </span>
    <span>
        编辑文件
    </span>
  </li>
  <li class="arrow1">
    <span>
        第二步
    </span>
    <span>
        邀请投标人
    </span>
  </li>
  <li class="arrow2">
    <span>
        第三步
    </span>
    <span>
        发布招标公布
    </span>
  </li>
</ul>

第一张图的样式：

.arrowBox {
  display: flex;
  justify-content: center;
  .arrow {
    width: 290px;
    height: 36px;
    color: #fff;
    background-color: #8091DF;
    position: relative;
    line-height: 36px;
    &::after {
      content: ' ';
      height: 0;
      top: 0px;
      right: -44px;
      position: absolute;
      width: 0;
      display: inline-block;
      border-top: 18px solid transparent;
      border-left: 44px solid #8091DF;
      border-bottom: 18px solid transparent;
      z-index: 100;
    }
  }
  .arrow1 {
    width: 290px;
    height: 36px;
    color: #181818;
    background-color: #eee;
    position: relative;
    line-height: 36px;
    margin-left: 14px;
    &::before {
      content: ' ';
      height: 0;
      top: 0px;
      left: 0px;
      position: absolute;
      width: 0;
      display: inline-block;
      border-top: 18px solid transparent;
      border-left: 45px solid #fff;
      border-bottom: 18px solid transparent;
      z-index: 9;
    }
    &::after {
      content: ' ';
      height: 0;
      top: 0px;
      right: -44px;
      position: absolute;
      width: 0;
      display: inline-block;
      border-top: 18px solid transparent;
      border-left: 44px solid #eee;
      border-bottom: 18px solid transparent;
      z-index: 99;
    }
  }
  .arrow2 {
    width: 290px;
    height: 36px;
    color: #181818;
    background-color: #eee;
    position: relative;
    line-height: 36px;
    margin-left: 14px;
    &::before {
      content: ' ';
      height: 0;
      top: 0px;
      left: 0px;
      position: absolute;
      width: 0;
      display: inline-block;
      border-top: 18px solid transparent;
      border-left: 45px solid #fff;
      border-bottom: 18px solid transparent;
      z-index: 9;
    }
  }
}

思路整理：刚开始只是单纯的根据ui图做出来了整体样式，但是发现空白的间隔调不出来，后面被一朋友的指点，自己有灵光一闪，想出了再加一个小山角，比如第一张图：第一个li元素给了伪类放在后面，层级最高，第二个盒子给前后伪类，前伪类层级比父盒子高并且比第一个盒子的伪类层级低，第三个盒子加前伪类就行了，道理跟第二个差不多！

改变思路，事半功倍！