Responsive Paniermehl mit CSS Triangeln und Marge zwischen den einzelnen Posten

Ich möchte ein Brotkrümel machen einen Fortschrittsbalken zu simulieren, wie dieseResponsive Paniermehl mit CSS Triangeln und Marge zwischen den einzelnen Posten

standardmäßig alle Elemente grau und Klasse „abgeschlossen“ die Farbe grün. Aber ich habe ein Problem mit dem letzten Element, das mit der Breite spielt: schone mir ein Leerzeichen oder springe zur nächsten Zeile. Dies ist mein Code (SCSS & html):

ul.progress-tracker { 
 
    margin: 15px 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    &: before, &: after { 
 
    clear: both; 
 
    } 
 
    li { 
 
    list-style: none; 
 
    &: first-child { 
 
     a: before { 
 
     display: none; 
 
     } 
 
    } 
 
    &:last-child { 
 
     padding-right: 8px; 
 
     a { 
 
     margin: 0; 
 
     min-width: 30.09%; 
 
     padding: 3px 0 0 8px; 
 
     &: after { 
 
      display: none; 
 
     } 
 
     } 
 
    } 
 
    a { 
 
     content: ""; 
 
     display: block; 
 
     float: left; 
 
     height: 8px; 
 
     background: tint($light-blue, 60%); 
 
     text-align: center; 
 
     padding: 3px 4px 0 8px; 
 
     position: relative; 
 
     margin: 0 10px 0 0; 
 
     text-decoration: none; 
 
     color: #fff; 
 
     min-width: 31%; 
 
     &: before { 
 
     content: ""; 
 
     border-color: transparent; 
 
     border-top: 4px solid transparent; 
 
     border-bottom: 4px solid transparent; 
 
     border-left: 4px solid $light-gray; 
 
     position: absolute; 
 
     left: 0; 
 
     top: 0; 
 
     } 
 
     &:after { 
 
     content: ""; 
 
     border-top: 4px solid transparent; 
 
     border-bottom: 4px solid transparent; 
 
     border-left: 4px solid tint($light-blue, 60%); 
 
     position: absolute; 
 
     right: -4px; 
 
     top: 0; 
 
     z-index: 1; 
 
     } 
 
    } 
 
    a.completed { 
 
     background-color: $primary-green; 
 
     &: after { 
 
     border-left-color: $primary-green; 
 
     } 
 
    } 
 
    } 
 
}

<ul class="progress-tracker"> 
 
    <li> 
 
    <a class="completed"> 
 

 
    </a> 
 
    </li> 
 
    <li> 
 
    <a> 
 

 
    </a> 
 
    </li> 
 
    <li> 
 
    <a> 
 

 
    </a> 
 
    </li> 
 
</ul>

Quelle

2016-07-04 Jorgelig

Gibt es Text innerhalb dieser „Paniermehl sein müssen "? – amn

für Auflösungen Telefon (xs) hat keinen Text im Inneren, ist es möglich, dass für Versionen von Tisch und Schreibtisch in der Anzahl der Schritt (1,2,3) – Jorgelig

in Ordnung geht. Und was ist das Problem? Soweit ich sehen kann, haben Sie nur drei Bilder angezeigt und Ihren Code gezeigt. Sie sagen, dass Sie den Fortschrittsbalken "genau so" anzeigen möchten, wo ein Balken ohne Ende gezeichnet wird, aber dann sagen Sie, dass Sie ein Problem haben, das auf das Fehlen eines spitzen Endes hinweist. – amn

Gelöst:

ul.progress-tracker { 
 
    padding: 0; 
 
    overflow: hidden; 
 
} 
 
ul.progress-tracker:before, ul.progress-tracker:after { 
 
    clear: both; 
 
} 
 
ul.progress-tracker li { 
 
    list-style: none; 
 
    float: left; 
 
    min-width: calc(100%/3); 
 
    padding-right: 5px; 
 
} 
 
ul.progress-tracker li:first-child a:before { 
 
    display: none; 
 
} 
 
ul.progress-tracker li:last-child { 
 
    padding-right: 0px; 
 
} 
 
ul.progress-tracker li:last-child a { 
 
    margin: 0; 
 
} 
 
ul.progress-tracker li:last-child a:after { 
 
    display: none; 
 
} 
 
ul.progress-tracker li a { 
 
    content: ""; 
 
    display: block; 
 
    height: 8px; 
 
    background: #bcc3c4; 
 
    text-align: center; 
 
    position: relative; 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 
ul.progress-tracker li a:before { 
 
    content: ""; 
 
    border-color: transparent; 
 
    border-top: 4px solid transparent; 
 
    border-bottom: 4px solid transparent; 
 
    border-left: 4px solid #EAF3E3; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
} 
 
ul.progress-tracker li a:after { 
 
    content: ""; 
 
    border-top: 4px solid transparent; 
 
    border-bottom: 4px solid transparent; 
 
    border-left: 4px solid #bcc3c4; 
 
    position: absolute; 
 
    right: -4px; 
 
    top: 0; 
 
    z-index: 1; 
 
} 
 
ul.progress-tracker li a.completed { 
 
    background-color: #8ABD2E; 
 
} 
 
ul.progress-tracker li a.completed:after { 
 
    border-left-color: #8ABD2E; 
 
}

 <ul class="progress-tracker"> 
 
      <li> 
 
       <a class="completed"> 
 
        
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a class="completed"> 
 

 
       </a> 
 
      </li> 
 
      <li> 
 
       <a> 
 
        
 
       </a> 
 
      </li> 
 
     </ul>

Quelle

2016-07-05 16:06:17 Jorgelig

Responsive Paniermehl mit CSS Triangeln und Marge zwischen den einzelnen Posten

Antwort

Verwandte Themen