は、私はこのコードを持っているポップオーバー

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

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

Answer 2

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; 
} 

あなたは疑問に示すそのままHTMLにこのCSSを使用することができます。