带有底部箭头的 HTML 注释框 [重复]答案

【问题标题】：HTML comment box with bottom arrow [duplicate]带有底部箭头的 HTML 注释框 [重复]
【发布时间】：2017-09-15 11:50:30
【问题描述】：

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

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

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

【问题讨论】：

如果你想让箭头相对于剩余的空进度条水平居中，你可能需要JS来调整它的最终位置。对于标记，请查看using pseudo-elements to create an arrow element。

标签： html css

【解决方案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>

【讨论】：