web-dev-qa-db-fra.com

Comment positionner un triangle CSS en utilisant :: after?

J'ai créé une div avec une flèche en bas en utilisant :: after. Voici le code HTML:

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

Et voici le 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;
}

Voici le résultat:

Here is the result

Je voudrais que la flèche soit tout en bas de la division grise. Je ne veux pas avoir le contenu entre la div et la flèche du bas. Savez-vous comment je peux faire ça?

csscss3pseudo-class
14
Damien Morvan

Ajoutez simplement position:relative à .sidebar-resources-categories 

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

explication: la position des éléments :: after est basée sur son parent; dans votre exemple, vous aviez probablement un élément parent du .sidebar-res ... qui avait une hauteur définie, il est donc affiché juste en dessous. L'ajout de position par rapport à .sidebar-res ... fait passer les éléments après à 100% de son parent, qui devient maintenant les fichiers .sidebar-res ... car sa position est définie sur relative. Je ne sais pas comment l'expliquer, mais c'est le comportement attendu.

en savoir plus sur le sujet: http://css-tricks.com/absolute-positioning-inside-relative-positioning/

18
Matthew Abrman

Ajouter une classe:

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

}

Mis à jour votre jsfiddle: http://jsfiddle.net/wrm4y8k6/8/

7
Elow

Vous pouvez définir un triangle avec la position voir ce code pour référence

.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