添加箭头以取消警报看起来像弹出窗口

Question

我有这个代码：

如何让它在顶部有箭头： 像这样：

所以它看起来像弹出窗口？ 这是它的造型：

.div-cancel{
    background-color: #FAFAFA;
    width:200px;
    display:none;
    height:85px;
    font-size:15px;
    padding-top:18px;
    padding-left:10px;
    padding-right:10px
}
                            <div class="div-cancel" id="cancel101" >
                            <span><span style="background-color: #FAAB20;"><i class="fa fa-exclamation" style="width:25px;color:white"></i></span>
                            Please type in 'CANCEL' to cancel subscription. </span>
                            </div>

Answer 1

Here是演示。

Css解决方案是：

.div-cancel {
    background-color: #1E2021;
    width:200px;
    display:block;
    height:85px;
    font-size:15px;
    padding-top:18px;
    padding-left:10px;
    padding-right:10px;
    position: relative;
    color: #ababab;
}

.div-cancel:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-bottom-color: #1E2021;
    left: 10px;
    top: -12px;
}

您可以将此CSS与问题中显示的未更改的HTML一起使用。

Answer 2

如果你想在你的箭头周围使用边框，使用::before伪元素的变换和一些定位，可以获得你想要的效果，而无需任何添加的标记。只需确保div-cancel将position设置为relative。

.div-cancel {
  position: relative;
  margin-top: 20px;
  background-color: #FAFAFA;
  width: 200px;
  height: 85px;
  font-size: 15px;
  padding-top: 18px;
  padding-left: 10px;
  padding-right: 10px;
  border: 1px solid grey;
}

.div-cancel::before {
  position: absolute;
  top: -4px;
  left: 5px;
  width: 5px;
  height: 5px;
  border: 1px solid grey;
  border-bottom: 0;
  border-right: 0;
  background: #fff;
  transform: rotate(45deg);
  content: '';
}

<div class="div-cancel" id="cancel101">
  <span>
    <span style="background-color: #FAAB20;">
        <i class="fa fa-exclamation" style="width:25px;color:white"></i>
    </span> Please type in 'CANCEL' to cancel subscription.
  </span>
</div>