斜边按钮

我正在尝试构建如下所示的按钮：

我可以使用以下方法完成此操作:after and CSS 三角形，但我无法使用可变高度元素。有什么方法可以实现这一点并保持可变高度吗？

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

在这种情况下，您可以使用倾斜的 div。这里唯一的问题是，随着按钮变高，由于倾斜，它们会稍微变宽。如果您只处理 1 或 2 行，这可能不是问题。如果它们变得非常高，可能会导致事物明显不完全对齐：

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

这也不是完全可扩展的。您需要决定必须支撑的最大高度并进行相应调整。您需要支撑的高度越高，倾斜的 div 就必须越宽。

结果（没有红色）：http://jsfiddle.net/AaP47/4/