Styling-Element wie Chrom-Tab ohne CSS3-Transformation?

Question

Ich suche nach einer Möglichkeit, eine Tab-Leiste zu erstellen, die wie die in Google Chrome aussieht, ohne CSS3 oder Bild-Ressourcen zu verwenden. Ich möchte, dass es in IE8 funktioniert.

...

Dies ist ein CSS3 example, die ich im Internet gefunden, aber wie Sie sehen können, verwendet es „Transformation“, die in IE8 nicht verfügbar ist.

.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

Für alte IE < 9 fügen Sie die Klasse ie,
für nicht -IE < 9 Browsern Ihre erstaunliche Sachen mit Steigung etc ....

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>