Slanted Przyciski krawędzi

Question

Próbuję zbudować przyciski, które wyglądają tak:

można to osiągnąć stosując :after i CSS triangles, ale nie mogę dostać, że praca ze zmiennymi elementami wysokości. Czy jest jakiś sposób na osiągnięcie tego i utrzymanie zmiennej wysokości?

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

Answer 1

Można użyć wypaczone div w tym przypadku. Jedynym problemem jest to, że gdy twoje guziki są wyższe, ze względu na pochylenie, będą one nieco szersze. Może to nie być problemem, jeśli masz do czynienia tylko z 1 lub 2 liniami. Jeśli się bardzo wysoki, co może spowodować, aby zauważalnie nie wyrównać dokładnie:

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

To nie jest też całkowicie skalowalne. Będziesz musiał zdecydować o największej wysokości, którą musisz utrzymać i odpowiednio dostosować. Im wyższy poziom wsparcia, tym szerszy musi być przekrzywiony element div.

Wynik (bez czerwona): http://jsfiddle.net/AaP47/4/

Answer 2

Tylko dlatego, że miałem fun majsterkowania w innym kierunku i zaoferować koncepcję opcji, nawet jeśli pozornie już dostał odpowiedź;

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

oraz;

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

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

Cheers!