Pulsanti bordo inclinato

Question

sto cercando di costruire pulsanti che assomigliano a questo:

posso realizzare questo utilizzando :after e CSS triangles, ma non riesco a ottenere che il lavoro con elementi altezza variabile. C'è un modo per realizzare questo e mantenere l'altezza variabile?

Fiddle: http://jsfiddle.net/AaP47/2/

Answer 1

Si potrebbe usare un div distorta in questo caso. L'unico problema qui è che man mano che i pulsanti diventano più alti, a causa dell'oscillazione, si allargheranno leggermente. Questo potrebbe non essere un problema se hai a che fare solo con 1 o 2 linee. Se ottengono molto alto può causare cose da notevolmente non allineare esattamente:

http://jsfiddle.net/AaP47/3/

.button.triangle:after { 
    content: ""; 
    background-color: red; 
    display: block; 
    height: 100%; 
    position: absolute; 
    right: -30px; 
    top: 0; 
    width: 60px; 
    transform: skewX(-10deg); 
} 

Anche questo non è completamente scalabile. Dovresti decidere l'altezza maggiore che devi sostenere e aggiustare di conseguenza. Quanto più alto è necessario sostenere, tanto più ampio deve essere il div obliquo.

Risultato (senza il rosso): http://jsfiddle.net/AaP47/4/

Answer 2

Solo perché mi sono divertito armeggiare in una direzione diversa e per offrire un concetto di un'opzione anche se a quanto pare già ottenuto una risposta;

a { 
    padding-right: 20px; 
    padding-left: 20px; 
    text-decoration: none; 
    color: white; 
    font-weight: bold; 
    display: inline-block;  
    border-right: 30px solid transparent; 
    border-top: 50px solid #4c4c4c;  
    height: 0; 
    line-height: 20px; 
} 
a p {margin-top: -45px;} 

e;

<a href="#"> 
    <p>this is a triangle button<br/> 
     with multiple lines!</p> 
</a> 

jfiddle: http://jsfiddle.net/AaP47/6/

Cheers!