我有这个密码:
我怎么能让它上面有箭头:
这样地:
所以它看起来像一个弹出窗口?
这是它的造型:
.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>