Élément de style comme une languette chromée sans transformation CSS3?

Question

Je cherche un moyen de créer une barre d'onglets qui ressemble à celle de google chrome sans utiliser de ressources CSS3 ou d'image. Je veux que cela fonctionne dans IE8.

...

C'est un CSS3 example que je trouve sur Internet, mais comme vous pouvez le voir, il utilise « transformer », ce qui est disponible dans IE8.

.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

Pour IE ancien < 9 ajouter la classe ie,
pour non -IE < 9 navigateurs font des choses incroyables avec votre gradient 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>