使用CSS演示所选选项卡的插入符号状图形

如何使用CSS为“Dashboard”选项卡创建选定的状态？更具体地说，这个数字：

|
>
|

---

我知道可以像CSS一样创建插入符号，但上面的选定/活动状态不同。使用CSS（空插入符号

）可以实现这样的设计吗？

在每个子框中放置一个

div

，并使用

位置：相对
和
左：100%
将其移出框，这样做非常容易。例如

如果您的酒吧设置如下：

<div id="bar">
    <div class="box" id="child1"> 
        <div class="triangle"> </div>
    </div>
    <div class="box" id="child2"> 
        <div class="triangle"> </div>
    </div>
    <div class="box" id="child3"> 
        <div class="triangle"> </div>
    </div>
</div>

这样做会给您带来如下好处：

在本例中，我允许您在任何框上设置所有属性。
我想我应该试一试，因为我以前做过几个三角形，但在不透明度方面做得不多

它有一个“按钮”，上面有一个带箭头的div，绝对定位。“箭头框”的不透明度允许您查看基础框

我想可以用jQuery移动箭头框，覆盖所选的各种按钮

以下是CSS中制作箭头的部分：
CSS

对我来说这是很好的锻炼。谢谢你的提问

编辑：如果您使用display:none隐藏覆盖元素，您可以将鼠标悬停在按钮上，将其更改为display:block。
为什么不使用插入符号的图像作为背景图像？@David，我考虑过了，但我正在尽可能多地使用css并避免使用图像。
.box {
    width: 50px;               /* 50 x 50 pixel size boxes. */
    height: 50px;              /* 50 x 50 pixel size boxes. */
    background-color: #bdc3c7; /* Arbitrary background color */
}

.box[selected="true"] {
    background-color: #27ae60; /* Selected box color */
}

.box[selected="true"] > .triangle {
   border-left-color: #27ae60; /* Make sure this color is the same as the above one */
}

.triangle {
    position: relative;        /* Used to move the triangle "out" of the parent */
    top: calc(50% - 10px);     /* For centering, the -10px is to make up for the border */
    left: 100%;                /* Move the box completely out of the parent */
    /* Create Triangle */
    height: 0px;
    width: 0px;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
}

.testdiv:after {
    content: ' ';
    width: 0px;
    height: 0px;
    background-color: transparent;
    position: absolute;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid yellow;
    top: 40px;
    right: -25px;
}