web-dev-qa-db-fra.com

CSS: Placer une flèche / triangle avec une bordure en haut de mon menu déroulant

Je viens de lancer ce site Web ( http://dovidoved.org/ ) et le client veut un de ces triangles/flèches en haut de chaque menu déroulant. Le problème est que le menu est entouré d'une bordure et que la flèche doit correspondre à l'arrière-plan et à la bordure. Je ne sais pas comment faire ça. Aucune suggestion? Dois-je utiliser une image? Voici mon CSS:

 /* creates triangle */
 .main-navigation ul ul:before {
     border-bottom: 10px solid #fae0bb;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     content: "";
     height: 0;
     position: absolute;
     right: 0;
     top: -10px;
     width: 0;
 }

 .main-navigation ul ul {
     background: #fae0bb;
     border: 8px solid #fffefe;
     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
     float: left;
     position: absolute;
     margin: 0;
     top: 2.8em;
     left: -999em;
     width: 200px;
     z-index: 99999;
}
csscss3css-shapes
12
Adam Bell

Vous pouvez le faire en utilisant :beforeet :afterpseudo elements, pour créer deux triangles:

.main-navigation ul ul:before {
    content:"";
    position: absolute;
    right: 11px;
    top: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #fae0bb transparent;
    z-index:9999;
}
.main-navigation ul ul:after {
    content:"";
    position: absolute;
    right: 4px;
    top: -22px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 17px 17px 17px;
    border-color: transparent transparent #ffffff transparent;
    z-index:9998;
}

Il vous suffit de définir la valeur right correcte pour les deux afin de les adapter à vos besoins.

exemple en direct

18
EdenSource
.main-navigation a:after {
    content: "";
    width: 0; 
    height: 0; 
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #f00;
    position: absolute;
    top: -2px;
    right: -20px;
}

enter image description here

Ajustez le rembourrage de li pour ajuster les triangles.

2
Mihey Egoroff