HTML+CSS--＞箭头流程进度条(两种方法)

html

<!-- 1、用伪类画箭头部分 --> <div class="test"></div> <div class="test"></div> <div class="test"></div> <br/><br/><br/> <!--2、红箭头是单独的盒子，通过移动显示出箭头 --> <div id="progress"> <div class="bg-red"> </div> <div class="bg-red"> <div class="triangle-box"> <div class="triangle bg-red"></div> </div> </div> <div class="bg-red"> <div class="triangle-box"> <div class="triangle bg-red"></div> </div> </div> <div class="bg-gray"> <div class="triangle-box"> <div class="triangle bg-red"></div> </div> </div> </div>

CSS

/* 1、使用伪类画箭头部分 */ .test{ float: left; margin: 0 2px 0 ; width: 100px; height: 40px; background-color: #DD2727; position: relative; } .test:after{ content: ''; display: block; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #DD2727; position: absolute; top: 0; left: 100px; z-index: 10; } .test:before{ content: ''; display: block; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid white; } /* 2、红箭头是单独的盒子，通过移动显示出箭头 */ #progress{ display: flex; justify-content: start; } #progress>div{ width: 100px; height: 34px; line-height: 35px; color: white; position: relative; text-align: center; } /* 三角形 */ .triangle-box{ display: inline-block; width: 20px; height: 34px; overflow: hidden; position: absolute; left: 0; } .triangle{ transform:rotate(45deg); transform-origin: left top; position: absolute; top: -3px; left: -1px; width: 25px; height: 25px; border: 2px solid white; } /* 红色、灰色背景 */ .bg-red{ background-color: #DD2727; } .bg-gray{ background-color: #CCCCCC; }

本文章 来自于转载的，地址转发的地址