HTML comment box with bottom arrow

Question

I want to create a comment box with bottom arrow. But I don't know how to add this arrow. This is the model that I want to create.

This is my code so far.

.arrow-div {
    position: relative;
    background: #424242;
    margin: 2em auto;
    color:#eaeaea;
    border-radius:3px;
    height: 2.5em;
    text-align:center;
    width:270px;
 }

<div class="arrow-div">
$167 still needed for this project
</div>

If you want the arrow to be horizontally centered relative to the remaining empty progress bar, you probably need JS to adjust it's final position. For the markup, look at [using pseudo-elements to create an arrow element](https://css-tricks.com/snippets/css/css-triangle/). — Terry, Sep 15 '17 at 11:52

score 5 · Accepted Answer · edited Sep 15 '17 at 11:58

You can use the :before pseudo-selector:

.arrow-div {
    position: relative;
    background: #424242;
    display:flex;
    align-items: center;
    justify-content:center;
    margin: 2em auto;
    color:#eaeaea;
    border-radius:3px;
    height: 2.5em;
    width:270px;
 }
 
 .arrow-div:before
 {
    content: '';
    position: absolute;
    bottom:-7px; right: 20px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 7.5px 0 7.5px;
    border-color: #042424 transparent transparent transparent;
 }

<div class="arrow-div">
  <p>Blah Blah content...</p>
</div>

HTML comment box with bottom arrow

1 Answers1