添加箭頭取消警報看起來像酥料餅

如何我可以把它的頂部有那個箭頭的東西：這樣的：

所以它可以看看像彈出窗口？這裏是造型吧：

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

來源

2017-08-26 john

參見[如何使用jQuery驗證引導酥料餅（https://stackoverflow.com/questions/8439490/how-to-use-twitter-bootstrap-popovers-for- jquery的驗證的通知） – Vivick

如果你想要一個箭頭周圍的邊框，使用::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>

來源

2017-08-26 17:29:09 mdelrossi1

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不變的問題所示。

來源

2017-08-26 17:28:20

添加箭頭取消警報看起來像酥料餅

回答

相關問題