如何为所选选项卡提供矩形样式css,如下面的屏幕截图所示?
我想把我的账单做成这样,但不知道怎么做 我也尝试了下面的示例形状代码,但它没有出现如何为所选选项卡提供矩形样式css,如下面的屏幕截图所示?,css,html,angular-ui-bootstrap,Css,Html,Angular Ui Bootstrap,我想把我的账单做成这样,但不知道怎么做 我也尝试了下面的示例形状代码,但它没有出现 #demo:before { border-width: 10px; border-top-color: #ccc; border-left-width: 50px; border-right-width: 0; left: 0; } #demo:after { border-width: 2px;
#demo:before {
border-width: 10px;
border-top-color: #ccc;
border-left-width: 50px;
border-right-width: 0;
left: 0;
}
#demo:after {
border-width: 2px;
border-top-color: #777;
border-left-width: 50px;
border-right-width: 0;
left: 0;
}
可以通过在a元素上添加after伪元素来实现这一点
<ul>
<li><a class="active" href="#">Notifications</a></li>
<li><a href="#">Reports</a></li>
</ul>
ul {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style-type: none;
background-color: blue;
float: left;
}
ul li {
float: left;
}
ul li + li {
border-left: 1px solid rgba(255, 255, 255, .5);
}
ul li a {
display: block;
color: #fff;
font-size: 14px;
text-decoration: none;
font-family: helvetica;
padding: 20px 16px;
position: relative;
}
ul li a.active:after {
content: "";
display: block;
background-color: #fff;
height: 10px;
position: absolute;
bottom: 0;
left: 16px;
right: 16px;
}
保险商实验室{
填充:0;
保证金:0;
框大小:边框框;
列表样式类型:无;
背景颜色:蓝色;
浮动:左;
}
ulli{
浮动:左;
}
ul li+li{
左边框:1px实心rgba(255、255、255、.5);
}
ullia{
显示:块;
颜色:#fff;
字体大小:14px;
文字装饰:无;
字体系列:helvetica;
填充:20px 16px;
位置:相对位置;
}
ul li a.主动:之后{
内容:“;
显示:块;
背景色:#fff;
高度:10px;
位置:绝对位置;
底部:0;
左:16px;
右:16px;
}
这是小提琴:
请与我分享html标记。谢谢你的回复。如果我使用引导选项卡,则您发送的代码有效,但如果我使用角度ui选项卡,则无法应用此代码。以下是angular ui选项卡的代码:您可以在以下链接中的angular ui选项卡代码中找到选项卡代码:等待您的帮助。