webentwicklung-frage-antwort-db.com.de

Wie positioniere ich ein CSS-Dreieck mit :: after?

Ich habe ein div mit einem unteren Pfeil mit :: after erstellt. Hier ist der HTML-Code:

<div class="sidebar-resources-categories">Topics</div>
<div class="text-content">ok ok</div>

Und hier ist das CSS:

.sidebar-resources-categories{
    height: 50px;
    margin-bottom: 20px;
    background-color: #e8e8e8;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
}
.sidebar-resources-categories::after{
    content: '';
    position: absolute;
    left: 42%;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #e8e8e8;
    clear: both;
}

Hier ist das Ergebnis:

Here is the result

Ich möchte, dass sich der Pfeil ganz unten im grauen Div befindet. Ich möchte nicht den Inhalt zwischen dem div und dem unteren Pfeil haben. Weißt du, wie ich das schaffen kann?

csscss3pseudo-class
14
Damien Morvan

Fügen Sie einfach position:relative zu .sidebar-resources-categories hinzu 

http://jsfiddle.net/matthewabrman/5msuY/

erklärung: Die Position der :: after-Elemente basiert auf ihrem übergeordneten Element. In Ihrem Beispiel hatten Sie wahrscheinlich ein übergeordnetes Element der .sidebar-res ... -Datei, die eine festgelegte Höhe hatte, daher direkt darunter gerendert. Durch das Hinzufügen einer Position relativ zu der .sidebar-res ... bewegen sich die after-Elemente zu 100% ihres übergeordneten Elements, das jetzt zur .sidebar-res wird, da ihre Position auf relativ gesetzt ist. Ich bin nicht sicher, wie ich es erklären soll, aber es ist erwartetes Verhalten.

lesen Sie mehr zum Thema: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

18
Matthew Abrman

Klasse hinzufügen:

.com_box:after {
     content: '';
    position: absolute;
    left: 18px;
    top: 50px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #000;
    clear: both;

}

Jsfiddle wurde aktualisiert: http://jsfiddle.net/wrm4y8k6/8/

7
Elow

Sie können ein Dreieck mit der Position festlegen. Siehe diesen Code als Referenz

.top-left-corner {
    width: 0px;
    height: 0px;
    border-top: 0px solid transparent;
    border-bottom: 55px solid transparent;
    border-left: 55px solid #289006;
    position: absolute;
    left: 0px;
    top: 0px;
}
0
Ankit Patel