How to position a CSS triangle using ::after?

I've created a div with a bottom arrow using ::after. Here is the HTML code:

<div>Topics</div> <div>ok ok</div> 

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?

3 Answers

Just add position:relative to the parent element .sidebar-resources-categories

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:

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:

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