Jak utworzyć ukośne zakładki z obramowaniem w CSS?

Question

Próbuję utworzyć kątowe wypustki do siedzenia powyżej sekcji partnerskiej, i natknąłem się na ten wielki przykład:

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/

Chciałabym jednak nadać temu kształtowi inny kolor obramowania 2px i niestety ta metoda nie działa, ponieważ używa obramowania t o stwórz prawą stronę kształtu.

Jakieś pomysły na to, jak mogę to zmienić?

Answer 1

Można spróbować tego podejścia: jsFiddle

Zamiast granic stworzyć efekt skośną używam element :after pseudo go utworzyć. To pozwala mi ustawić granice wokół niego. Następnie używam pseudo elementu :before, aby ukryć granice, których nie chcę oglądać. Powtarzający się kod 2px w CSS pochodzi od wartości szerokości ramki.

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