This question already has answers here:
How do CSS triangles work?
                                
                                    (19个回答)
                                
                        
                        
                            CSS Speech Bubble with Box Shadow
                                
                                    (5个答案)
                                
                        
                                2年前关闭。
            
                    
我想用底部箭头创建一个注释框。但我不知道如何添加此箭头。这是我要创建的模型。

html - 带底部箭头的HTML注释框-LMLPHP

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



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

10-05 20:57
查看更多