Variation des bordures CSS avec transparence

Question

J'essaie de créer un menu HTML/CSS dans lequel le lien actif est indiqué par une section de transparence (un pointeur encoché sur la bordure), pour révéler l'image derrière le menu.

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

Mais avec cette sorte d'aiguille crantée : http://larsakerson.com/northendgreenway/beta2.html

Existe-t-il un moyen de faire cela en CSS (2.1 ou 3), ou un menu strictement basé sur l'image est-il le seul moyen de faire fonctionner cela ?

Answer 1

Vous pouvez réaliser un coin dentelé en utilisant des bordures comme suit...

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

jsFiddle .

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

Answer 2

Voilà, mec. http://jsfiddle.net/jalbertbowdenii/vnNXW/ il suffit de remplacer .trapezoid par .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 modifiez la taille des bordures pour qu'elles s'adaptent. pour .active{border-color:transparent}