CSS3変換なしのクロムタブのようなスタイリング要素ですか？

Question

CSS3や画像リソースを使わずにGoogle Chromeのようなタブバーを作成する方法を探しています。私はIE8で動作するようにしたい。

...

これは私がインターネットで見つけましたが、あなたが見ることができるように、それはIE8で利用されていない、「変換」を使用CSS3 exampleです。古いIE < 9については

.tab-box { 
    height:50px; 
    background: #fff; 
    border-radius: 4px; 
    border:1px solid #ccc; 
    margin:0 10px 0; 
    box-shadow: 0 0 2px #fff inset; 


-webkit-transform: perspective(100px) rotateX(30deg); 
-moz-transform: perspective(100px) rotateX(30deg); 

} 

Answer 1

....

html, body{height:100%; margin:0;font:16px/24px sans-serif;} 
 
body{background:#abc;} 
 
div{background:#fff;overflow:auto;} 
 

 
/*TABS DEFAULT STYLES*/ 
 
/* here goes your awesomeness*/ 
 
.tabs{margin-bottom:0;padding:0;list-style:none;} 
 
.tabs:after{content:"";display:table;clear:both;} 
 

 
/*TABS IE*/ 
 
.tabs.ie li{ 
 
    position:relative; 
 
    overflow:hidden; 
 
    float:left; 
 
    margin-right: -6px; /* (3) than adjust this value for the overlap */ 
 
} 
 
.tabs.ie li a{ 
 
    background: #ddd; 
 
    position:relative; 
 
    display:block; 
 
    padding: 4px 12px; 
 
    margin: 0 12px; /* (2) adjust the value till the borders corner touch */ 
 
} 
 
.tabs.ie li a:before, 
 
.tabs.ie li a:after{ 
 
    content: ""; 
 
    position:absolute; 
 
    top: 1px; width: 1px; /*(fictive 1px "roundness")*/ 
 
    border-bottom: 60px solid #ddd; /* (1) Edit px till border is not cut */ 
 
} 
 
.tabs.ie li a:before{ 
 
    left: -21px; /* 20border + 1width */ 
 
    border-left: 20px solid transparent; 
 
} 
 
.tabs.ie li a:after{ 
 
    right: -21px; /* 20border + 1width */ 
 
    border-right: 20px solid transparent; 
 
    z-index:2; 
 
} 
 
/* ACTIVE TAB */ 
 
.tabs.ie li a.active{ 
 
    background:#fff; 
 
} 
 
.tabs.ie li a.active:after, 
 
.tabs.ie li a.active:before{ 
 
    border-bottom-color:#fff; 
 
    z-index:2; 
 
} 
 

 
.tabs.ie li:after{ 
 
    content: ""; 
 
    position:absolute; 
 
    top: 1px; width: 2px; 
 
    border-bottom: 60px solid #999; 
 
    right: -10px; 
 
    border-right: 20px solid transparent; 
 
    z-index:1; 
 
}

<ul class="tabs ie"> 
 
    <li><a>HOME</a></li> 
 
    <li><a class="active">ABOUT</a></li> 
 
    <li><a>PROJECTS</a></li> 
 
    <li><a>CONTACT</a></li> 
 
</ul> 
 

 
<div><h1>ABOUT</h1></div>

を、クラス ieを追加 非 -Ie < 9ブラウザの
は、勾配などを使用して素晴らしいものを行います