亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

  發(fā)布時間：2017-06-26 16:02:06   作者：佚名   我要評論
這篇文章主要介紹了純CSS實現(xiàn)氣泡對話框尖角處理的實現(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到了沒有？

相關(guān)文章

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

    這是一個對話框插件，它主要用來卸載軟件時的提示，特點在于，當(dāng)用戶選擇保留和卸載后，對話框中間的表情會根據(jù)用戶選擇發(fā)生動態(tài)變化，非?？蓯邸Ｐ枰呐笥亚皝硐螺d
    2019-07-29

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

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

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

    泡沫對話框是一種比較流行的趨勢因為它改變了傳統(tǒng)，通常情況下都是使用html和javascript或者是圖片來實現(xiàn)，接下來為大家介紹下使用css3配合html來實現(xiàn)一些簡單的泡沫對話框
    2013-03-21

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

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

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

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

最新評論