我有这个密码:
html - 添加箭头以取消警报,使其看起来像弹出窗口-LMLPHP
我怎么能让它上面有箭头:
这样地:
html - 添加箭头以取消警报,使其看起来像弹出窗口-LMLPHP
所以它看起来像一个弹出窗口?
这是它的造型:

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

最佳答案

如果您希望箭头周围有一个边框,那么使用::before伪元素上的transform和一些位置,可以在不添加任何标记的情况下获得所需的效果。只要确保div-cancel设置为position

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

09-25 17:16
查看更多