CSS/网页设计 : how to create an oblique/sided button

Question

如何在网站上创建一个按钮，每一边都是倾斜的(对 Angular 线)？

我没有找到可以向您展示的示例，但这是我在 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 的底部对齐元素，但它似乎是一个起点，至少。 (一旦我回到我的办公 table ，任何解释/改进答案的编辑或评论都会受到欢迎......)。

已编辑 修改演示 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 .

已编辑 回应亚当(OP)的问题(在评论中):

...I'm trying to understand how you did it.

这个想法基于一个简单的前提，即边界之间的连接是 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 .

如果两个相邻的边框被着色并创建相同的两个直 Angular 三 Angular 形(使用与上面相同的 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 .