CSS盒除箭头外有箭头

我正在创建一个消息系统，其中一个用户与另一个用户说话。我用箭头创建了消息框。到目前为止，所有的盒子都有箭头，除了一个（见下面的图片）。此外，高度不会自动调整到内容。有人可以看看我的代码，看看发生了什么？CSS盒除箭头外有箭头

HTML

<div class="col-xs-7 live-chat-feed"> 


      <div class="chat-date"><p>Friday 12:34</p></div> 
      <div class="user-post"> 
      <div class="chat-avatar"> 
      <img src="img/bitmap(3).png" 
    srcset="img/bitmap(3)@2x.png 2x, 
      img/bitmap(3)@3x.png 3x" 
    class="Bitmap"><p class="time-posted">12:47</p> 
      </div> 

      <div class="single-post-box"> 
       <p class="chat-content"> 
      Hey there! <br> 
      I noticed that not only are you a football fan 
      but you also go to a lot of games! What do you think about the upcoming season and who is your favorite team? Looks to me like you are a Pats fan!</p> 
      </div> 



      </div> 





      <div class="new-live-chat"> 



      <div class="chat-date"><p>Saturday 22:40</p></div> 

      <div id="current-user"> 
      <div class="user-post"> 
      <div class="chat-avatar"> 
      <img src="img/bitmap-copy.png" 
    srcset="img/[email protected] 2x, 
      img/[email protected] 3x" 
    class="Bitmap"><p class="time-posted">12:47</p> 
      </div> 

      <div class="single-post-box"> 
       <p class="chat-content"> 
      Wow! That’s awesome. I love football and im a beat writer for the Pats & have the luxury of catching their games!</p> 
      </div> 

      <div class="single-post-box"> 
       <p class="chat-content"> 
      What about you? Are you a Pats fan yourself?</p> 
      </div> 
      </div> 
      </div> 

      <div class="user-post"> 
      <div class="chat-avatar"> 
      <img src="img/bitmap(3).png" 
    srcset="img/bitmap(3)@2x.png 2x, 
      img/bitmap(3)@3x.png 3x" 
    class="Bitmap"><p class="time-posted">12:47</p> 
      </div> 

      <div class="single-post-box"> 
       <p class="chat-content"> 
       Oh yeah! Brady with the SB win again this year! </p> 
      </div> 
      </div> 

      <div id="current-user"> 
      <div class="user-post"> 
      <div class="chat-avatar"> 
      <img src="img/bitmap-copy.png" 
    srcset="img/[email protected] 2x, 
      img/[email protected] 3x" 
    class="Bitmap"><p class="time-posted">12:47</p> 
      </div> 

      <div class="single-post-box"> 
       <p class="chat-content"> 
      Thats pretty cool! No idea how much of a Pats fan you were to already have season tix! I dont even have them yet!</p> 
      </div> 


      </div> 
      </div> 


      </div>

CSS

.live-chat-feed { 
    margin-left: 50%; 
    margin-top: -310%; 
    background-color: #000; 

} 

.new-live-chat { 
    margin-top: 20%; 
} 

.chat-avatar { 
    position: relative; 
    left: -30%; 
    top: 85px; 
} 

.chat-date, 
.chat-content, 
.time-posted { 
    color: #8785ab; 
} 

.chat-date { 
    position: relative; 
    left: 30%; 
} 

.single-post-box { 
    width: 729.9px; 
    height: auto; 
    border-radius: 2px; 
    background-color: #ffffff; 
    box-shadow: 0 2px 4px 0 rgba(167, 169, 197, 0.55); 
    margin-bottom: 10%; 
    padding: 20px; 
} 


#current-user .single-post-box { 
    position: relative; 
    left: -15%; 
    border-radius: 2px; 
    background-color: #1ac384; 
    box-shadow: 0 2px 4px 0 rgba(167, 169, 197, 0.55); 

} 

.single-post-box::after { 

    content: ''; 
    height: 0; 
    position: absolute; 
    width: 0; 
    border: 10px solid transparent; 
    border-right-color: #fff; 
    right: 97.5%; 
    top: 115px; 


} 


#current-user .single-post-box::after { 

    content: ''; 
    height: 0; 
    position: absolute; 
    width: 0; 
    border: 10px solid transparent; 
    border-left-color: #1ac384; 
    left: 100%; 
    top: 0px; 

}

来源

2017-05-06 Michael Stokes

您所描述的问题无法用您迄今提供的代码进行复制。为了让别人来帮助你，请提供所有相关的代码。谢谢！ – Mers

@我认为有足够的代码来解决问题，因此它是相关的。还需要什么？ –

@Mers我刚添加了所有与CSS相关的CSS。这应该有所帮助。 –