希望得到這個邊界效應

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