Question

如何在网站上创建一个按钮，每边都是倾斜的（对角线）？

我没有找到一个示例给你看，但这是我在10分钟内找到的最接近的：

http://cfl.ca/（请参阅带有标签的菜单：新闻，视频，时间表，排名）

但是，就我而言，我需要为独立按钮设计那种设计而不是菜单标签。

Answer 1

这是一种（不完美的）这样做的方式，虽然它有点标记沉重：

<div class="button">
    <span></span>
    Some button text
    <span></span>
</div>

使用CSS：

.button {
    width: auto;
    display: inline-block;
    background-color: #f00;
    height: 2em;
    overflow: hidden;
}

.button span:first-child {
    display: inline-block;
    border-top: 1em solid #fff;
    border-left: 1em solid #fff;
    border-bottom: 1em solid #f00;
    border-right: 1em solid #f00;
    float: left;
    margin-right: 1em;
}

.button span:last-child {
    display: inline-block;
    border-bottom: 1em solid #fff;
    border-right: 1em solid #fff;
    border-top: 1em solid #f00;
    border-left: 1em solid #f00;
    margin-left: 1em;
}

.button:hover {
    background-color: #0f0;
}

.button:hover span:first-child {
    border-right-color: #0f0;
    border-bottom-color: #0f0;
}

.button:hover span:last-child {
    border-left-color: #0f0;
    border-top-color: #0f0;
}

JS Fiddle demo

我还不确定为什么文本与.button元素的底部对齐，但它似乎是一个起点，至少。（当我回到我的办公桌时，欢迎任何解释/改进答案的编辑或评论。）

编辑修改演示CSS：

.button {
    width: auto;
    display: inline-block;
    background-color: #f00;
    height: 2em;
    line-height: 2em; /* centering the text vertically */
}

/* other stuff */

.button span:last-child {
    display: inline-block;
    border-bottom: 1em solid #fff;
    border-right: 1em solid #fff;
    border-top: 1em solid #f00;
    border-left: 1em solid #f00;
    margin-left: 1em;
    float: right; /* removes from the 'normal flow' */
    margin-top: -2em; /* aligns vertically with the top of the parent .button div */
}

Revised JS Fiddle demo

已编辑以回应Adam的（OP）问题（在评论中）：

......我正在努力了解你是如何做到的。

这个想法是基于简单的前提，即边界之间的连接是45°，如下面的HTML / CSS所示：

<span id="box"></span>

#box {
    display: inline-block;
    border-width: 30px;
    border-style: solid;
    border-top-color: red;
    border-right-color: green;
    border-bottom-color: yellow;
    border-left-color: blue;
}

结果：

JS Fiddle demo

如果两个相邻的边框被着色，则会创建相同的两个直角三角形（使用与上面相同的HTML）：

#box {
    display: inline-block;
    border-width: 30px;
    border-style: solid;
    border-top-color: red;
    border-right-color: red;
    border-bottom-color: yellow;
    border-left-color: yellow;
}

，并提供：

JS Fiddle demo

在上面的例子中，我将包含元素（.box）的高度定义为2em，将包含的span元素的边界定义为1em（使总体身高2em，如果我给span他们自己的height（或width）形状会变得更复杂：

#box {
    display: inline-block;
    border-width: 30px;
    border-style: solid;
    border-top-color: red;
    border-right-color: red;
    border-bottom-color: yellow;
    border-left-color: yellow;
    height: 30px;
}

给予（height）：

或者，使用width：

#box {
    display: inline-block;
    border-width: 30px;
    border-style: solid;
    border-top-color: red;
    border-right-color: red;
    border-bottom-color: yellow;
    border-left-color: yellow;
    width: 30px;
}

，并提供：

同时使用width 和 height可以获得部分剖析的框：

#box {
    display: inline-block;
    border-width: 30px;
    border-style: solid;
    border-top-color: red;
    border-right-color: red;
    border-bottom-color: yellow;
    border-left-color: yellow;
    width: 30px;
    height: 30px;
}

，并提供：

这可能对伪3D帧效果有用;特别是:hover效果/变化。

我不确定这是否有帮助，但如果您有任何特定的好奇心，请在评论中告诉我，我会尽力回答。 =）

已编辑以添加伪元素::before / ::after解决方案。

HTML在某种程度上简化为：

<div class="button">
    Some button text
</div>
<div class="button">
    Some more button text
</div>
<div class="button">
    And yet more button text
</div>

但是CSS更加冗长，而不是复杂，但肯定会有更多它：

.button {
    width: auto;
    display: inline-block;
    background-color: #f00;
    height: 2em;
    line-height: 2em;
    position: relative;
    margin-left: 3em;
}

.button::before,
.button::after {
    content: '';
    border-color: #f00;
    border-width: 1em;
    border-style: solid;
    position: absolute;
    top: 0;
    bottom: 0;
}

.button::before {
    border-top-color: transparent;
    border-left-color: transparent;
    right: 100%;
}

.button::after {
    border-right-color: transparent;
    border-bottom-color: transparent;
    left: 100%;
}

.button:hover {
    background-color: #0f0;
}

.button:hover::before {
    border-color: #0f0;
    border-top-color: transparent;
    border-left-color: transparent;
}

.button:hover::after {
    border-color: #0f0;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

JS Fiddle demo

Answer 2

有趣的是，thirtydot今天早些时候发布了一个指向教程的链接：http://www.joecritchley.com/demos/slanted-nav/

这是导航，但原则应该是相同的。

Answer 3

您为每个元素使用倾斜背景图像，然后重叠元素以使图像在视觉上彼此对接。解决没有矩形命中区域的唯一方法是使用图像映射（您可能不想使用它）。

Answer 4

我知道这不是最“技术”的回答，但是this site可以为你生成那种css（如果可能的话，浏览器兼容）

CSS / Web设计：如何创建倾斜/双面按钮

4 个答案: