倾斜边缘按钮 [英] Slanted Edge Buttons

问题描述

我正在尝试建立如下的按钮：

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

我可以使用：和 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);
}

这也不是完全可扩展的。您需要决定要支持的最大高度，并进行相应调整。

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屋！