Slanted Edge Buttons

Question

I'm trying to build buttons that look like this:

I can accomplish this using :after and CSS triangles, but I can't get that working with variable height elements. Is there any way to accomplish this and keep variable height?

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

Answer 1

You could use a skewed div in this case. The only issue here is that as your buttons get taller, due to the skew, they will get slightly wider. This may not be an issue if you are only dealing with 1 or 2 lines. If they get very tall it may cause things to noticeably not line up exactly:

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

This is also not completely scalable. You would need to decide on the largest height you have to support and adjust accordingly. The taller you need to support, the wider the skewed div must be.

Result (without the red): http://jsfiddle.net/AaP47/4/

Answer 2

Just because I had fun tinkering in a different direction and to offer an option concept even though you apparently already got an answer;

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

and;

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

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

Cheers!