倾斜边缘按钮

Question

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

我可以使用:after和CSS三角形来完成这个,但我无法使用可变高度元素.有没有办法实现这一点并保持可变高度？

小提琴:http://jsfiddle.net/AaP47/2/

Answer 1

在这种情况下，您可以使用倾斜的 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/