Adding CSS triangle to a widget div

Question

I would like to make a transparent arrow over a background of a div that contains the widget title.

Desired output:

If image not working, you can see the widget section and its title on this site: http://moneyrope.com/ - The widget in question has the title "Latest Money Tips" - (excuse the mess. Not a done site. Just a testing/staging environment).

CSS:

.latest-heading {
    background: #53386f none repeat scroll 0 0;
    color: #fff;
    margin-bottom: 2%;
    padding: 2%;
    text-align: center;
}

Thank you very much in advance.

Sorry, I did a search and didn't find the one you linked to. Also, that solution isn't working for me. — satrap, Jan 04 '17 at 05:16

score 0 · Answer 1 · answered Jan 03 '17 at 22:23

0

You can use the :after pseudo class to add this arrow.

Here is a working example:

.latest-heading {
    background: #53386f none repeat scroll 0 0;
    color: #fff;
    margin-bottom: 2%;
    padding: 2%;
    text-align: center;
}
.latest-heading:after {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #53386f;
  content: '';
  position: absolute;
  left: calc(50% - 20px);
  top: 48px;
}

<div class="latest-heading">1</div>

answered Jan 03 '17 at 22:23

Dekel

60,707
10
101
129

Thanks Dekel for the answer. Unfortunately, it displays way above the element in the actual page. If I take the top:48px out, then it will display it a few PXs above where it should ideally go, but I just can't figure out how to get it there. – satrap Jan 04 '17 at 04:59
You can add `position:relative` to the . latest-heading class – Dekel Jan 04 '17 at 11:54

Adding CSS triangle to a widget div

1 Answers1