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

1、伪类

 

 

2、移动

 

 

 

 

 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; }

 

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