CSS: Posizionamento di una freccia/triangolo con bordo nella parte superiore del mio menu a discesa

Appena lanciato questo sito Web (http://dovidoved.org/) e il client desidera uno di quei triangoli/frecce nella parte superiore di ciascun menu a discesa. Il problema è che il menu ha un bordo attorno e la freccia deve essere in mesh sia con lo sfondo che con il bordo. Non sei sicuro di come farlo. Eventuali suggerimenti? Devo usare un'immagine? Ecco il mio CSS:CSS: Posizionamento di una freccia/triangolo con bordo nella parte superiore del mio menu a discesa

/* 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; 
}

fonte

2015-04-22 Adam Bell

Che un problema ad un aggiungere un triangolo css per .nav-menu à: dopo? –

È possibile utilizzare sia un'immagine come sfondo di ciascun collegamento, posizionata nella parte destra, o magari un carattere di icona (che è più versatile e flessibile, che consente di cambiare dimensione e colore senza problemi.). In questo secondo caso, ti suggerisco [Icomoon] (https://icomoon.io/) –

puoi usare ': after' pseudo elemento per aggiungere un bordo http://jsfiddle.net/ond3g1jp/ –

È possibile eseguire questa operazione utilizzando :before e :after elementi pseudo, per creare due triangoli:

.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; 
}

Non vi resta che impostare il valore corretto right per entrambi per farli stare a quello che vi serve.

Live exemple

fonte

2015-04-22 08:36:35 EdenSource

Ottimo! Grazie per l'esempio. Ha funzionato davvero alla grande. –

Felice di averlo aiutato :) – 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

Regolare l'imbottitura di li di fare triangoli in forma.

fonte

2015-04-22 07:52:37

CSS: Posizionamento di una freccia/triangolo con bordo nella parte superiore del mio menu a discesa

risposta

Problemi correlati