CSS: Platzieren eines Pfeils/Dreiecks mit Rahmen oben in meinem Dropdown-Menü

Gerade gestartet diese Website (http://dovidoved.org/) und der Client möchte eines dieser Dreiecke/Pfeile oben in jedem Dropdown-Menü. Problem ist, dass das Menü einen Rahmen um es herum hat und der Pfeil sowohl mit dem Hintergrund als auch mit dem Rahmen in Eingriff gebracht werden sollte. Ich bin mir nicht sicher, wie ich das machen soll. Irgendwelche Vorschläge? Muss ich ein Bild verwenden? Hier ist meine CSS:CSS: Platzieren eines Pfeils/Dreiecks mit Rahmen oben in meinem Dropdown-Menü

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

Quelle

2015-04-22 Adam Bell

Was ist ein Problem, ein ein CSS-Dreieck fügt eine .nav-Menü: nach? –

Sie könnten sowohl ein Bild als Hintergrund für jeden Link verwenden, der auf der rechten Seite positioniert ist, als auch eine Icon-Schriftart (die vielseitiger und flexibler ist, so dass Sie Größe und Farbe problemlos ändern können). In diesem zweiten Fall schlage ich vor, Sie [Icomoon] (https://icomoon.io/) –

können Sie ': nach 'Pseudo-Element, um einen Rahmen hinzufügen http://jsfiddle.net/ond3g1jp/ –

Sie können dies mit :before und :after Pseudo-Elemente tun, zwei Dreiecke zu erstellen:

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

Sie nur den richtigen right Wert für beide setzen müssen, um sie fit zu machen, was Sie brauchen.

Live exemple

Quelle

2015-04-22 08:36:35 EdenSource

Großartig! Danke für das Beispiel. Wirklich super geklappt. –

Froh, dass es geholfen hat :) – 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

Passen Sie die Polsterung von li auf Dreiecke fit zu machen.

Quelle

2015-04-22 07:52:37

CSS: Platzieren eines Pfeils/Dreiecks mit Rahmen oben in meinem Dropdown-Menü

Antwort

Verwandte Themen