css - 使用 CSS 的类似插入符号的图形来演示选定的选项卡

Question

如何使用 CSS 创建“仪表板”选项卡的选定状态？更具体地说这个数字:

|
>
|

我知道可以使用 CSS 创建插入符号，如 http://css-tricks.com/snippets/css/css-triangle/但上面的选中/事件状态是不同的。这样的设计可以使用CSS(空插入符>)来实现吗？

Answer 1

您可以通过在每个子框中放置一个 div 并使用 position:relative 和 left: 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>

你的风格如下:

.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;
}

这样做应该会给你类似的结果:http://jsfiddle.net/BD4f3/1/

在此示例中，我允许您使用任何框上的属性来设置所有这些。