制作箭头步骤条

HTML

 <div class="arrow">

                <ul>
                    <li class="active" style="z-index: 3">1
                        <!-- <div class="left"></div>
                                 <div  class="right"></div> -->
                    </li>
                    <li style="z-index: 2">2
                        <!-- <div class="left"></div>
                                    <div  class="center"></div>
                                    <div class="right"></div> -->
                    </li>
                    <li style="z-index: 1">3

                    </li>
                </ul>
            </div>

css

  ul {

            // overflow: hidden;
            li {
                position: relative;
                float: left;
                width: 33.33%;
                height: 42px;
                background-color: #CAD3D9FF;

                &:not(:last-child)::before {

                    content: "";
                    position: absolute;
                    top: -5px;
                    right: -50px;
                    width: 0;
                    height: 0;
                    border: 26px solid #fafafa;
                    border-right-color: transparent;
                    border-top-color: transparent;
                    border-bottom-color: transparent;
                }

                &:not(:last-child)::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: -40px;
                    width: 0;
                    height: 0;
                    border: 21px solid #CAD3D9FF;
                    border-right-color: transparent;
                    border-top-color: transparent;
                    border-bottom-color: transparent;
                }

                &.active {
                    background-color: #367699FF;

                    &:not(:last-child)::after {
                        border-left-color: #367699FF;
                        border-right-color: transparent;
                        border-top-color: transparent;
                        border-bottom-color: transparent;
                    }

                }
            }
        }

 

转载于:https://my.oschina.net/u/4004801/blog/3037838