CSS3绘制波浪线

.wavy-line {
       width: 100%;    height: 10px;    background-image: -webkit-radial-gradient(circle, transparent, transparent 9px, orange 9px, orange 10px, transparent 10px, transparent);    background-image: -moz-radial-gradient(circle, transparent, transparent 9px, orange 9px, orange 10px, transparent 10px, transparent);    background-image: radial-gradient(circle, transparent, transparent 9px, orange 9px, orange 10px, transparent 10px, transparent);    background-size: 20px 20px;}

 

箭头：

1 
     

1 .goback { 2       position: absolute; 3       top: 18px; 4       left: 18px; 5       border: 10px solid transparent; 6       border-right: 10px solid #ccc; 7     } 8      9     .goback:hover {10       border-right: 10px solid #808080;11     }12     13     .goback:after {14       content: '';15       position: absolute;16       top: -10px;17       left: -7px;18       border: 10px solid transparent;19       border-right: 10px solid #fff;20     }

圆点：

1 
     

1 .circle { 2       position: absolute; 3       margin: 52px 45px; 4       width: 12px; 5       height: 12px; 6       background: #fff; 7       border-radius: 50%; 8       border: 1px solid #2090ff; 9     }10     11     .circle:after {12       content: '';13       margin: 3px;14       display: table;15       width: 6px;16       height: 6px;17       background: #2090ff;18       border-radius: 50%;19     }

三角形：

1  
     

1 .triangle {2       position: absolute;3       top: 16px;4       right: 18px;5       border: 6px solid transparent;6       border-top: 6px solid #123456;7     }

清除浮动

1 .clearfix:after{2       content: " ";3       display: block;4       height: 0;5       line-height: 0;6       clear: both;7       zoom:1;8     9 }

 列表

1     
     
       2       
      
        3         
       
         4           
        
          5             
         
           6               
           7               
          
            8 
           { {item.level}} 9 
          
10               
          
           11 
           { {item.level}}12 
          
13             
         
14             
         
          15               
          
{ {item.title}}
16               
          
{ {item.rtname}}
17             
         
18             
         
          19               
          
{ {item.createtime | stringLength:10}}
20               
          { {item.priorityName}}21               
          { {item.severityName}}22             
         
23           
        
24         
       
25       
      
26     
     

1  .list-container {  2     position: relative;  3   }  4   /**********list底线************/  5   .list-container::after {  6     content: " ";  7     position: absolute;  8     left: 0;  9     bottom: 0; 10     right: 0; 11     height: 1px; 12     border-bottom: 1px solid #ccc; 13     color: #ccc; 14     -webkit-transform-origin: 0 100%; 15     transform-origin: 0 100%; 16     -webkit-transform: scaleY(.5); 17     transform: scaleY(.5); 18   } 19   /**********list-item************/ 20   .list-itme {} 21   /**********list-item-container************/ 22   .list-item-container { 23     margin: 0 0 0 10px; 24     padding: 10px 10px 10px 0; 25     position: relative; 26     display: flex; 27   } 28   /**********list-item-container的上划线************/ 29   .list-item-container:before { 30     content: " "; 31     position: absolute; 32     left: 0; 33     top: 0; 34     right: 0; 35     height: 1px; 36     border-top: 2px solid #e5e5e5; 37     color: #e5e5e5; 38     -webkit-transform-origin: 0 0; 39     transform-origin: 0 0; 40     -webkit-transform: scaleY(.5); 41     transform: scaleY(.5); 42     left: 0px; 43     z-index: 2; 44   } 45   .list-item-container:first-child:before { 46     display: none; 47   } 48   /**********list-item-container的头像************/ 49   .list-item-container .avatar { 50     position: relative; 51   } 52   .list-item-container .avatar img { 53     height: 50px; 54     width: 50px; 55     border-radius: 10%; 56   } 57   .list-item-container .avatar ion-icon { 58     font-size: 22px; 59     position: absolute; 60     left: 40px; 61     top: 40px; 62   } 63   .list-item-container .avatar ion-icon.handler { 64     color: #488aff; 65   } 66   .list-item-container .avatar ion-icon.agree { 67     color: #32db64; 68   } 69   .list-item-container .avatar ion-icon.reject { 70     color: #f53d3d; 71   } 72   .list-item-status { 73     position: absolute; 74     left: 38px; 75     top: 38px; 76     display: flex; 77     align-items: center; 78     justify-content: center; 79     margin-right: 8px; 80     flex: none; 81     width: 24px; 82     height: 24px; 83     border-radius: 12px; 84     background-color: rgba(0, 0, 0, 0.38); 85     color: #fff; 86     transition: background-color 225ms cubic-bezier(0.4, 0, 0.2, 1); 87   } 88   .list-item-status span { 89     color: #fff; 90   } 91   .agree { 92     background-color: #4185f4; 93   } 94   .reject { 95     background-color: #f53d3d; 96   } 97   /**********list-item-container的信息************/ 98   .list-item-info { 99     flex: 1;100     overflow: hidden;101     margin: 0 20px 0 20px;102     padding: 8px 0 8px 0;103   }104   .list-item-info h2 {105     display: block;106     font-size: 14px;107     overflow: hidden;108     text-overflow: ellipsis;109     white-space: nowrap;110   }111   .list-item-info p {112     display: block;113     font-size: 12px;114     color: #999;115     overflow: hidden;116     text-overflow: ellipsis;117     white-space: nowrap;118   }119   /**********list-item-container的扩展信息************/120   .list-item-infoext {121     margin: 0 20px 0 20px;122     padding: 8px 0 8px 0;123   }124   /**********list-item-infoext后的小三角************/125   .list-item-infoext::after {126     content: " ";127     display: inline-block;128     height: 6px;129     width: 6px;130     border-width: 2px 2px 0 0;131     border-color: #c8c8cd;132     border-style: solid;133     -webkit-transform: matrix(.71, .71, -.71, .71, 0, 0);134     transform: matrix(.71, .71, -.71, .71, 0, 0);135     position: relative;136     top: -2px;137     position: absolute;138     top: 50%;139     margin-top: -4px;140     right: 10px;141   }142   .list-item-infoext h2 {143     display: block;144     font-weight: normal;145     font-size: 12px;146     color: #c5c5c5;147     overflow: hidden;148     text-overflow: ellipsis;149     white-space: nowrap;150   }151   .list-item-infoext span {152     display: inline-block;153     /* margin: 0 5px; */154     font-size: 10px;155     padding: 1px 8px;156     border-radius: 15%;157   }158   .list-item-infoext span.commonly {159     color: $commonly;160     border: solid 1px $commonly;161   }162   .list-item-infoext span.urgent {163     color: $urgent;164     border: solid 1px $urgent;165   }166   .list-item-infoext span.danger {167     color: $danger;168     border: solid 1px $danger;169   }