CSSで枠線付きのタブを作成する方法は？

Question

私は、コンテンツ部分の上に座って角度の付いたタブを作成しようとすると、この偉大な例に出くわしています：

HTML：

<div class="tab"> 
    <div class="arrow"></div> 
</div> 

CSS：

body 
{ 
    background-color: #666;  
} 
.tab 
{ 
    height: 50px; 
    width: 150px; 
    border-radius: 10px 10px 0px 0px; 
    background-color: #FFF; 
    position: relative; 
} 

.arrow 
{ 
    border-color: transparent transparent #FFF #FFF; 
    border-style: solid; 
    border-width: 23px 23px 23px 23px; 
    height:0; 
    width:0; 
    position:absolute; 
    bottom:0px; 
    right:-43px; 
} 

http://jsfiddle.net/P3P3Z/2/

しかし、この図形に2pxの異なる境界線の色を設定したいのですが、残念ながらこの方法は境界線tを使用しているので動作しませんo形状の右辺を作成する。

どのように私はそれをモドできますか？

Answer 1

あなたはこのアプローチを試すことができます：jsFiddle

代わりに傾斜効果を作成するために、境界線を使用しての、私はそれを作成するために:after擬似要素を使用しています。これで私はその周りに罫線を設定することができます。それから私は、私が見たくない罫線を隠すために擬似要素:beforeを使用しています。 CSSの繰り返しの2pxは、境界幅の値から導出されます。

CSS

.tab:before { 
    height: 50px; 
    width: 10px; 
    display: block; 
    content:" "; 
    background-color: #FFF; 
    position: absolute; 
    right: -2px; 
    top: -2px; 
    border-top: 2px solid blue; 
    border-bottom: 2px solid blue; 
} 
.tab { 
    height: 50px; 
    width: 150px; 
    border-radius: 10px 10px 0px 0px; 
    background-color: #FFF; 
    position: relative; 
    border: 2px solid blue; 
} 
.tab:after { 
    display: block; 
    content:" "; 
    width: 100px; 
    height: 50px; 
    top: -2px; 
    background-color: #FFF; 
    position: absolute; 
    right: -29px; 
    transform:skewX(45deg); 
    -ms-transform:skewX(45deg); 
    -webkit-transform:skewX(45deg); 
    border: 2px solid blue; 
    z-index: -1; 
}