Làm cách nào để tạo các tab nghiêng bằng đường viền trong CSS?

Question

tôi đang cố gắng để tạo ra các tab góc ngồi trên một phần nội dung, và tình cờ gặp ví dụ tuyệt vời này:

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/

Tuy nhiên, tôi muốn đặt màu đường viền 2px khác cho hình dạng này và rất tiếc, phương thức này không hoạt động vì nó sử dụng đường viền t o tạo mặt bên phải của hình dạng.

Bất kỳ ý tưởng nào về cách tôi có thể sửa đổi nó?

Answer 1

Bạn có thể thử phương pháp này: jsFiddle

Thay vì sử dụng các biên giới để tạo hiệu ứng nghiêng, tôi đang sử dụng một yếu tố :after giả để tạo ra nó. Điều này cho phép tôi thiết lập đường viền xung quanh nó. Sau đó, tôi đang sử dụng một phần tử giả :before để ẩn các đường viền mà tôi không muốn thấy. Định kỳ 2px trong CSS bắt nguồn từ giá trị độ rộng đường viền.

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