CSS'de kenarlıklı eğimli sekmeler nasıl oluşturulur?

Question

Bir içerik bölümünün üstünde oturmak açılı sekmeler oluşturmak için çalışıyoruz ve bu büyük örnek geldi am:

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/

Bununla birlikte, bu şekle farklı 2px kenarlık rengi ayarlamak istiyorum ve maalesef bu yöntem sınır t'yi kullandığından çalışmaz. o şeklin sağ tarafını yaratın.

Nasıl değiştirebileceğime dair herhangi bir fikir var mı?

Answer 1

, bu yaklaşımı deneyebilirsiniz: jsFiddle

yerine eğimli bir etki oluşturmak için sınırlarını kullanarak, bunu oluşturmak için bir :after sözde elemanı kullanıyorum. Bu, etrafımdaki sınırları ayarlamamı sağlıyor. Sonra görmek istemediğim sınırları gizlemek için bir :before sözde öğe kullanıyorum. CSS'deki yinelenen 2px, sınır genişliği değerinden elde edilir.

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