带底部箭头的HTML评论框

Question

我想用底部箭头创建一个评论框.但我不知道如何添加此箭头.这是我想要创建的模型.

到目前为止这是我的代码.

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

Answer 1

您可以使用:before伪选择器:

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