带底部箭头的HTML评论框

时间:2017-09-15 11:50:31

标签: html css

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

enter image description here

到目前为止,这是我的代码。



.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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:5)

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

&#13;
&#13;
.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;
 }
&#13;
<div class="arrow-div">
  <p>Blah Blah content...</p>
</div>
&#13;
&#13;
&#13;