斜边按钮 [英] Slanted Edge Buttons

问题描述

我正在尝试构建看起来像这样的按钮:

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

我可以使用 :after 和 CSS 三角形来完成此操作，但我无法使用可变高度元素.有没有办法做到这一点并保持可变高度?

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?

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

推荐答案

在这种情况下，您可以使用倾斜的 div.这里唯一的问题是当你的按钮变高时，由于倾斜，它们会变得更宽.如果您只处理 1 或 2 行，这可能不是问题.如果他们变得很高，可能会导致事情明显不完全对齐:

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

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

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.

结果(没有红色):http://jsfiddle.net/AaP47/4/

这篇关于斜边按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！