我有这些代码 - 只是在每个选项卡式面板中带有单独图形的选项卡式面板.当我切换标签时,内容未正确加载.当我点击另一个标签时,面板的活动状态没有改变,你能帮助一个brotha弄明白吗？
<div class="col-sm-6">
<!-- Tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#DailyIncome" role="tab" data-toggle="tab">Daily Income</a></li>
<li><a href="#YearlyIncome" role="tab" data-toggle="tab">Yearly Income</a></li>
<li><a href="#Clients" role="tab" data-toggle="tab">Clients</a></li>
<li><a href="#Orders" role="tab" data-toggle="tab">Orders</a></li>
</ul>
<!-- Content -->
<div class="tab-content">
<div class="tab-pane fade in active" id="DailyIncome">
<div id="DailyIncomeChart" class="DailyIncomePanel"></div>
</div>
<div class="tab-pane fade" id="YearlyIncome">
<div id="YearlyIncomeChart" class="YearlyIncomePanel"></div>
</div>
<div class="tab-pane fade" id="Clients"></div>
<div class="tab-pane fade" id="Orders"></div>
</div>
</div>
我最近发现了一篇文章,详细介绍了如何使用纯CSS创建响应三角形.我想进一步将其融入当前的设计中.
我能够将四个三角形完美地放置在方形div中(创建折纸式效果)并且它们具有响应性.
但是,当我尝试合并悬停效果时,它不会改变三角形的颜色 - 只会改变它周围的空白区域.
此外,当我的方形宽度发生变化(保持响应性)时,底部三角形与其他三角形分开 - 因为我使用了绝对定位和底部:0; 将三角形放在正方形内.
有没有人知道如何在纯CSS中实现我想要的效果？这是相关的代码:JSFiddle
HTML:
<body>
<div class="container">
<div class="box">
<div class="triSectionTop"></div>
<div class="triSectionRight"></div>
<div class="triSectionBottom"></div>
<div class="triSectionLeft"></div>
</div>
</div>
</body>
SCSS:
.container {
box-sizing: border-box;
height: 400px;
width: 400px;
}
.box {
position: relative;
box-sizing: border-box;
height: 400px;
width: 100%;
}
.triSectionTop {
position: absolute;
top: 0;
width: 100%;
height: 0;
padding-left: 50%;
padding-top: 50%;
overflow: hidden;
&:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left: …