css如何實現(xiàn)小尖角聊天對話框帶尖角的說話泡泡效果

這篇文章主要介紹了css如何實現(xiàn)小尖角聊天對話框帶尖角的說話泡泡效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

一、css 繪制實現(xiàn)小尖角聊天對話框，帶尖角的說話泡泡，先給大家展示下效果圖。

二、效果

三、代碼

css;toolbar:false"><style>
#talkbubble {
  width: 160px; height: 80px;
  background: red;
  position: relative;
  border-radius: 10px;
  margin-left:20px;
}
#talkbubble:before {
  content: "";
  position: absolute;
  right: 100%; 
  top: 26px;
  border-top: 13px solid transparent;
  border-right: 26px solid red;
  border-bottom: 13px solid transparent;
}
</style>
<div id="talkbubble"></div>

補充：純css實現(xiàn)氣泡對話框尖角處理

先來看一下效果圖：

簡單粗暴上代碼：

html：             

<div class="dialog-box">
                      <span class="bot"></span>
                      <span class="top"></span>
                    </div>

less:
      .dialog-box {
        position: relative;
        span {
          width:0; 
          height:0; 
          font-size:0; 
          overflow:hidden; 
          position:absolute;
          &.bot{
            border-width: 15px; 
            border-style: solid dashed dashed; 
            border-color: transparent transparent #F9743A transparent; 
            left: 15px; 
            top: -29px;
          }
          &.top{
            border-width:13px; 
            border-style:solid dashed dashed; 
            border-color:transparent transparent #fff transparent; 
            left:17px; 
            top:-25px;
          }
        }
      }

大白話講解：

如果你想要其他方位的尖角，就調(diào)整boder-color的順序（上，右，下，左）。

主要的原理大概是有兩個一樣形狀，比例不同的小三角，一個和底色一樣的實心三角bot，一個白色底的top，并且top是會蓋在bot上面的，然后調(diào)整它們的大?。ㄒ话銇碚f實心要比白色塊大一點，這樣才可以顯示出有眼色的邊邊啊）。

最后想盡一切辦法讓它們重合（白色的top在上面，實心的bot在下面），最后通過調(diào)整絕對定位的參數(shù)（left，top）讓其重合的天衣無縫。好了，大功告成啦，不知道你get到了沒有？

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css如何實現(xiàn)小尖角聊天對話框帶尖角的說話泡泡效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!