<分区>
带有底部箭头的 HTML 注释框
我想创建一个带有底部箭头的评论框。但我不知道如何添加这个箭头。这是我要创建的模型。
到目前为止，这是我的代码。
.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>最佳答案
您可以使用 :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>关于带有底部箭头的 HTML 注释框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46238903/