Slanted Edge Buttons

css, responsive-design

Solution

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/

Problem

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/

Original source