倾斜边缘按钮

Question

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

我可以使用:after和CSS triangles完成此操作，但我无法使用可变高度元素。有没有办法实现这一点并保持可变高度？

小提琴：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/

Answer 2

只是因为我很乐意在不同的方向上修补并提供一个选项概念，即使你显然已经得到了答案;

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

和

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

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

干杯！