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:

<div class="sidebar-resources-categories">Topics</div>
<div class="text-content">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:

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?

possible duplicate of [How does this CSS triangle shape work?](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) — Paulie_D, Jul 31 '14 at 17:49
Not a duplicate. This issue relates to positioning the `::after` pseudo-element, not building the triangle itself. — showdev, Jul 31 '14 at 17:50

Matthew Abrman · Accepted Answer · 2021-01-20T14:31:58.330

26

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/

edited Jan 20 '21 at 14:31

answered Jul 31 '14 at 17:51

Matthew Abrman

711
10
18

2

To be a little more informative, it has to do with the `position:absolute` and `top:100%` properties on .sidebar-resources-categories::after. An absolutely positioned element is placed according to the nearest parent that has `position:relative,` or the highest parent in the DOM (body). So you were placing the arrow's top edge at 100% of the parent element's height. When you add the position:relative to .sidebar-resources-categories, the arrow instead places 100% of that bar's height. – Curlystraw Jul 31 '14 at 17:59
In regards to the jsfiddle, I would add margin-left: -20px; to the :after selector to fully center the arrow horizontally – Vasilis Tsirimokos Feb 09 '16 at 17:13
Nice! How can I surround the rectangle plus triangle *ensemble* with a border? Using `box-shadow`? How would you do that? – Razvan Zamfir Jul 30 '18 at 12:08

score 22 · Answer 2 · answered Dec 04 '15 at 12:58

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/

score 1 · Answer 3 · edited Jan 25 '23 at 17:07

1

You can set triangle using the position property as below:

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

edited Jan 25 '23 at 17:07

Lee Goddard

10,680
4
46
63

answered Jun 11 '18 at 17:33

Ankit Patel

21
1
4

How to position a CSS triangle using ::after?

3 Answers3

Linked