我想用底部箭头创建一个评论框。但我不知道如何添加此箭头。这是我想要创建的模型。
到目前为止,这是我的代码。
.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;
答案 0 :(得分:5)
您可以使用: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;
}
&#13;
<div class="arrow-div">
<p>Blah Blah content...</p>
</div>
&#13;