html!-- 1、用伪类画箭头部分 -- div classtest/div div classtest/div div classtest/div br/br/br/ !--2、红箭头是单独的盒子通过移动显示出箭头 -- div idprogress div classbg-red /div div classbg-red div classtriangle-box div classtriangle bg-red/div /div /div div classbg-red div classtriangle-box div classtriangle bg-red/div /div /div div classbg-gray div classtriangle-box div classtriangle bg-red/div /div /div /divCSS/* 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; } #progressdiv{ 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; }本文章 来自于转载的地址转发的地址