我使用纯 HTML 和 SCSS、jsfiddle 和下面的代码创建了一个非常漂亮的选项卡界面。当与我的 Angular UI 集成时,它可以满足我的所有需求 - 活动选项卡和不同的颜色。但现在我...
我使用纯 HTML 和 SCSS、 jsfiddle 和下面的代码创建了一个非常漂亮的标签界面。
当与我的 Angular UI 集成时,它可以满足我的所有需求 - 活动选项卡和不同的颜色。但现在我发现这 transform
会导致 边缘和重叠的角度根据文本的长度而变化 。此外, span
我用来偏移该变换的内部会使文本向另一个方向倾斜。有没有办法让边缘角度和重叠保持相同,并且文本保持笔直,无论长度如何?(我怀疑这里需要 CSS 三角函数。)
<div class="tabs">
<ul>
<li class="active positions-tab"><span>Tab 1</span></li>
<li class="positions-tab"><span>Tab 2</span></li>
<li class="positions-tab"><span>Very loooooong Tab</span></li>
<li class="reports-tab"><span>X</span></li>
<li class="reports-tab"><span>Tab 3</span></li>
<li class="stock-tab"><span>Tab 4</span></li>
</ul>
</div>
$positions-tab-color: #f2a870;
$reports-tab-color: #70BFEE;
$stock-tab-color: #66D572;
@mixin tabcolor($color) {
background: $color;
border: 1px solid darken($color, 20);
border-bottom: none;
color: darken($color, 40);
&.active {
box-shadow: 1px 0px 5px darken($color, 40);
}
}
div.tabs {
background: white;
overflow: hidden;
padding-top: 2px;
ul {
margin: 0;
padding:0;
li {
position: relative;
z-index: 1;
display: inline-block;
text-align: center;
left: 0;
bottom: 0;
right: 0;
margin: 0 -5px 0 0;
padding: 5px 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transform: perspective(4px) rotateX(2deg);
transform-origin: bottom;
filter: saturate(15%) brightness(130%);
@include tabcolor(#aaa);
&.stock-tab {
@include tabcolor($stock-tab-color);
}
&.positions-tab {
@include tabcolor($positions-tab-color);
}
&.reports-tab {
@include tabcolor($reports-tab-color);
}
&:hover {
filter: saturate(30%) brightness(120%);
transition: all 0.1s ease;
color: #333;
cursor: pointer;
&.active {
border-color: #000;
}
}
&.active {
filter: saturate(100%) brightness(100%);
z-index: 2;
color: #000;
}
span {
// text of tab (undo transform)
transform: perspective(4px) rotateX(-2deg);
display: block;
user-select: none;
text-decoration: none;
font: bold 11pt Helvetica;
}
}
}
}