How to position a CSS triangle using after

Question

I ve created a div with a bottom arrow using   after  Here is the HTML code    lt div class  sidebar-resources-categories  gt Topics lt  div gt   lt div class  text-content  gt ok ok lt  div gt    And here is the 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      Here is the result     I would like the arrow to be at the very bottom of the grey div  I don t want to have the content between the div and the bottom arrow  Do you know how I can do that

User · Accepted Answer

Just add position relative to the parent element  sidebar-resources-categories http   jsfiddle net matthewabrman 5msuY  explanation  the   after elements position is based off of it s parent  in your example you probably had a parent element of the  sidebar-res    which had a set height  therefore it rendered just below it  Adding position relative to the  sidebar-res    makes the after elements move to 100  of it s parent which now becomes the  sidebar-res    because it s position is set to relative  I m not sure how to explain it but it s expected behaviour  read more on the subject  http   css-tricks com absolute-positioning-inside-relative-positioning

User · Answer

Add a class    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       Updated your jsfiddle  http   jsfiddle net wrm4y8k6 8

User · Answer

You can set triangle with position see this code for reference   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

[css] How to position a CSS triangle using ::after?

Examples related to css

Examples related to pseudo-class