我没有找到一个示例来展示给你,但这是我在10分钟内找到的最接近的: http://cfl.ca/(查看带有选项卡的菜单:新闻、视频、时间表、排名)
然而,在我的情况下,我需要这种设计作为一个独立的按钮,而不是菜单选项卡。
这是一种(不完美的)实现方式,但它需要使用大量标记:
<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;
}
我还不确定为什么文本对齐到.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 */
}
根据 Adam(原文章作者)在评论中的问题进行编辑:
...我正在试图理解你是如何做到的。
这个想法基于一个简单的前提,即边框之间的连接是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;
}
得到如下结果:
如果相邻的两个边框颜色相同,则会创建两个直角三角形(使用与上述相同的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;
}
给出:
在上面的示例中,我将包含元素(.box
)的高度定义为 2em
,并且包含的 span
元素的边框为 1em
(如果我给 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;
}
有趣的是,thirtydot今天早些时候发布了一个关于这个的教程链接:http://www.joecritchley.com/demos/slanted-nav/
虽然是为导航栏设计的,但其原理应该是相同的。