想要获得这种边界效果

Question

我正试图在图片下方看到这种边框效果：

http://i.imgur.com/6BIIrw3.png

所以我要做的只是在右边有一个指向右边的边框，每边都有相同的间距。

提前致谢， 儒略

Answer 1

请记住包括您先尝试过的任何尝试，或者您自己没有付出任何努力（尽管我确定您已经做过）。

无论如何，我能够按照你的要求做一些简单的CSS和jQuery。

查看此JSfiddle。

这是破旧。 的 HTML：

<div class="selected">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>

这很简单。它所做的就是用他们的数字创造不同的DIV。我将第一个类命名为“已选定”，因此它在启动时会显示为浅蓝色。

这是CSS：

div 
{
    float: left;  /*allows the items to be inline with each other*/
    background: #123950;  /* dark blue */
    width: 50px;   /*change this value to suit your needs*/
    color: white; 
    text-align: center;   /*centers text*/
    position: relative;
    cursor: pointer;
    text-indent: 8px;  /*centers text a little more since part of the div is covered by triangles*/
}

.selected{
    background: #2B6A82; /*the light blue background color*/
}

div:after /*this creates the triangle after each div. */
{
    content:"";
    width:0;
    height:0;
    border-top:10px solid transparent; 
    border-bottom:10px solid transparent;
    border-left:10px solid #123950;
    position: absolute;
    left: 50px;
    z-index: 100;
}

.selected:after /*this creates a light blue triangle after each selected div. */
{
    content:"";
    width:0;
    height:0;
    border-top:10px solid transparent;
    border-bottom:10px solid transparent;
    border-left:10px solid #2B6A82;
    position: absolute;
    left: 50px;
    z-index: 100;
}

我的jQuery：

$(document).ready(function(){
$('div').click(function(){
    if ($(this).hasClass("selected")) //if the current clicked div is already selected...
        {
            //...do nothing
        }
        else //otherwise,
        {
            $('div').removeClass("selected"); //remove the selected class from all divs
            $(this).addClass("selected"); //only add selected style to clicked div.
        }
});
});