欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

純CSS實(shí)現(xiàn)氣泡對(duì)話框尖角處理方案

  發(fā)布時(shí)間：2017-06-26 16:02:06   作者：佚名   我要評(píng)論
這篇文章主要介紹了純CSS實(shí)現(xiàn)氣泡對(duì)話框尖角處理的實(shí)現(xiàn)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧

先來(lái)看一下效果圖：

簡(jiǎ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的順序（上，右，下，左）。

主要的原理大概是有兩個(gè)一樣形狀，比例不同的小三角，一個(gè)和底色一樣的實(shí)心三角bot，一個(gè)白色底的top，并且top是會(huì)蓋在bot上面的，然后調(diào)整它們的大小（一般來(lái)說(shuō)實(shí)心要比白色塊大一點(diǎn)，這樣才可以顯示出有眼色的邊邊?。?。

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

相關(guān)文章

  • CSS3軟件卸載對(duì)話框代碼 根據(jù)是否卸載出現(xiàn)不同表情

    這是一個(gè)對(duì)話框插件，它主要用來(lái)卸載軟件時(shí)的提示，特點(diǎn)在于，當(dāng)用戶選擇保留和卸載后，對(duì)話框中間的表情會(huì)根據(jù)用戶選擇發(fā)生動(dòng)態(tài)變化，非?？蓯?。需要的朋友前來(lái)下載
    2019-07-29

  • CSS實(shí)現(xiàn)對(duì)話框小尾巴功能

    對(duì)話框小尾巴，估計(jì)大家在實(shí)際開發(fā)中應(yīng)該經(jīng)常遇到過(guò)，省事點(diǎn)的就是叫設(shè)計(jì)小姐姐給切個(gè)帶小尾巴的背景圖，那不省事的呢？這篇文章主要介紹了CSS對(duì)話框小尾巴,需要的朋友可以
    2019-05-16

  • 用純css3和html制作泡沫對(duì)話框?qū)崿F(xiàn)代碼

    泡沫對(duì)話框是一種比較流行的趨勢(shì)因?yàn)樗淖兞藗鹘y(tǒng)，通常情況下都是使用html和javascript或者是圖片來(lái)實(shí)現(xiàn)，接下來(lái)為大家介紹下使用css3配合html來(lái)實(shí)現(xiàn)一些簡(jiǎn)單的泡沫對(duì)話框
    2013-03-21

  • 純CSS代碼實(shí)現(xiàn)各類氣球泡泡對(duì)話框效果

    利用CSS的border屬性可以生成一些圖形，例如三角或是圓角。純粹的CSS2的內(nèi)容，沒有兼容性的問(wèn)題，我之前在純CSS實(shí)現(xiàn)各類氣球泡泡對(duì)話框效果一文中算是比較詳細(xì)的講述了CSS
    2010-12-27

  • css 實(shí)現(xiàn)小尖角聊天對(duì)話框帶尖角的說(shuō)話泡泡效果

    這篇文章主要介紹了css 實(shí)現(xiàn)小尖角聊天對(duì)話框帶尖角的說(shuō)話泡泡效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下
    2020-04-10

最新評(píng)論