HTML/CSS評論泡沫箭頭 - 關於調整邊界線的建議只有

Question

只是一個快速的，第二雙眼睛和人們認爲最好的方法會是這樣的......正如你在默認的泡沫看到它有箭頭在頂部但是第二個有透明背景，但需要做的是一個帶有邊框輪廓作爲目前即時通訊使用填充使用邊框寬度等指針...

/* bubble box */ 
 

 
.comment__arrow { 
 
    border-style: solid; 
 
    border-width: 20px 0 0 20px; 
 
    border-color: transparent transparent transparent #edf1ee; 
 
    position: absolute; 
 
    top: -20px; 
 
} 
 

 
.comment__bubble { 
 
    background: #edf1ee; 
 
    padding: 24px 24px 0 24px; 
 
    margin-bottom: 12px; 
 
    border-radius: 5px; 
 
    position: relative; 
 
} 
 

 
.comment__bubble--write { 
 
    background: transparent; 
 
    border: 1px solid #EDF1EE; 
 
    padding: 19px 24px 0 24px; 
 
} 
 

 
.comment__bubble--write .comment__arrow { 
 
    border-color: transparent; 
 
}

<div class="comment__container comment__container--response"> 
 
    <p class="comment__arthor">John Thomas <span>Yesterday</span></p> 
 
    <div class="comment__bubble"> 
 
    <span class="comment__arrow"></span> 
 
    <p>I'm sorry to hear you didn't enjoy it Jimbo. It does need to be opened about an hour before drinking to give it some air and time to wam up to room tempeature.</p> 
 
    </div> 
 
    <p><a href="#" class="btn btn--secondary">Like</a> <span class="small">1 person likes this</span></p> 
 

 
    <form id="comment_ID"> 
 
    <div class="comment__bubble comment__bubble--write"> 
 
     <span class="comment__arrow"></span> 
 
     <textarea placeholder="Write a comment..." class="auto-expand" rows="1" data-min-rows="1"></textarea> 
 
    </div> 
 
    <input type="submit" name="submit__coment_ID" class="pull-right btn btn--primary large" value="Send"> 
 
    </form> 
 
</div>

Answer 1

試試這個代碼

/* bubble box */ 
 

 
     .comment__arrow { 
 
      border-style: solid; 
 
      border-width: 20px 0 0 20px; 
 
      border-color: transparent transparent transparent #edf1ee; 
 
      position: absolute; 
 
      top: -20px; 
 
     } 
 
    
 
     .comment__bubble { 
 
      background: #fff; 
 
      padding: 24px 24px 0 24px; 
 
      margin-bottom: 12px; 
 
      border-radius: 5px; 
 
      position: relative; 
 
       border: 1px solid #ccc; 
 
     } 
 
    
 
     .comment__bubble--write { 
 
      background: transparent; 
 
      border: 1px solid #EDF1EE; 
 
      padding: 19px 24px 0 24px; 
 
     } 
 
    
 
     .comment__bubble--write .comment__arrow { 
 
      border-color: transparent; 
 
     } 
 
    .comment__bubble.arrow:before { 
 
margin-left: -20px; 
 
border-style: solid; 
 
border-width: 20px 0 0 20px !important; 
 
border-color: transparent transparent transparent #ccc !important; 
 
    } 
 
     .comment__bubble.arrow:after { 
 
    margin-left: -19px; 
 
     border-width: 18px 0 0 18px !important; 
 
     border-color: transparent transparent transparent #fff !important; 
 
     } 
 
     .comment__bubble.arrow:after, .comment__bubble.arrow:before { 
 
      bottom: 100%; 
 
      left: 10%; 
 
      border: solid transparent; 
 
      content: " "; 
 
      height: 0; 
 
      width: 0; 
 
      position: absolute; 
 
      pointer-events: none; 
 
     }

<div class="comment__container comment__container--response"> 
 
    <p class="comment__arthor">John Thomas <span>Yesterday</span></p> 
 
    <div class="comment__bubble arrow"> 
 
    <p>I'm sorry to hear you didn't enjoy it Jimbo. It does need to be opened about an hour before drinking to give it some air and time to wam up to room tempeature.</p> 
 
    </div> 
 
    <p><a href="#" class="btn btn--secondary">Like</a> <span class="small">1 person likes this</span></p> 
 

 
    <form id="comment_ID"> 
 
    <div class="comment__bubble comment__bubble--write"> 
 
     <span class="comment__arrow"></span> 
 
     <textarea placeholder="Write a comment..." class="auto-expand" rows="1" data-min-rows="1"></textarea> 
 
    </div> 
 
    <input type="submit" name="submit__coment_ID" class="pull-right btn btn--primary large" value="Send"> 
 
    </form> 
 
</div>

Answer 2

這裏你是我創建了一個例子，如何以彩色邊框

.triangle { 
 
    width: 250px; 
 
    background: #fff; 
 
    border: 1px solid #000; 
 
    position: relative; 
 
    min-height: 200px; 
 
    padding: 20px; 
 
    text-align: center; 
 
    color: #333; 
 
    font: bold .7em/180px Helvetica, sans-serif; 
 
} 
 

 
.triangle:after, 
 
.triangle:before { 
 
    display: block; 
 
    position: absolute; 
 
    content: ''; 
 
    left: 100%; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
} 
 

 
.triangle:after { 
 
    top: 5px; 
 
    border-color: transparent transparent transparent #FFF; 
 
    border-width: 10px; 
 
} 
 

 
.triangle:before { 
 
    top: 4px; 
 
    border-color: transparent transparent transparent #000; 
 
    border-width: 11px; 
 
}

<div class="triangle"> 
 
    css triangle with border color 
 
</div>