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

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小提琴演示.

我还不确定为什么文本与.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 */
}

修改了JS Fiddle演示.

编辑回应亚当(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小提琴演示.

如果两个相邻边框被着色,则会创建相同的两个直角三角形(使用与上面相同的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小提琴演示.

在上面的例子中,我将包含元素(.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提琴演示.