1、伪类

2、移动

html

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

CSS

/*1、使用伪类画箭头部分*/ .test{ float:left; margin:02px0; width:100px; height:40px; background-color:#DD2727; position:relative; } .test:after{ content:\'\'; display:block; border-top:20pxsolidtransparent; border-bottom:20pxsolidtransparent; border-left:20pxsolid#DD2727; position:absolute; top:0; left:100px; z-index:10; } .test:before{ content:\'\'; display:block; border-top:20pxsolidtransparent; border-bottom:20pxsolidtransparent; border-left:20pxsolidwhite;
}
/*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:lefttop; position:absolute; top:-3px; left:-1px; width:25px; height:25px; border:2pxsolidwhite; } /*红色、灰色背景*/ .bg-red{ background-color:#DD2727; } .bg-gray{ background-color:#CCCCCC; }

posted on 2021-03-05 18:24 未来穗香 阅读(73) 评论(0) 编辑 收藏 举报