CSS bordure variation avec transparence

Question

J'essaye de faire un menu HTML/CSS dans lequel le lien actif est indiqué par une section de transparence (un pointeur hors encoche hors de la frontière), pour révéler l'image derrière le menu.

C'est ce que je vais pour: http://larsakerson.com/northendgreenway/beta3.html

Mais avec ce genre de pointeur cranté: http://larsakerson.com/northendgreenway/beta2.html

Est-il possible de le faire en CSS (soit 2,1 ou 3), ou est un menu strictement basé sur l'image, la seule façon de faire ce travail?

Answer 1

Vous pouvez faire un coin entaillé en utilisant les frontières comme si ...

div { 
    width: 0; 
    height: 0; 
    border-width: 20px; 
    border-style: solid; 
    border-color: transparent blue blue blue; 
    background: transparent; 
} 

jsFiddle.

Reportez-vous à jsFiddle et notez que le coin supérieur laisse passer l'arrière-plan. Il suffit d'adapter cet exemple à votre site.

Answer 2

vous voilà mec. http://jsfiddle.net/jalbertbowdenii/vnNXW/ il suffit de changer .trapezoid à .active: active {}

.trapezoid { 

    display:block; 

    margin:0; 

    padding:0; 

    width:1px; 

    height:1px; 

    background:transparent; 

    border-style: solid; 

    border-color:transparent #eee #eee #eee; 

    border-width: 50px 50px 50px 50px; 

} 

et changer les frontières-tailles pour s'adapter. pour .active {border-color: transparent}