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

使用CSS繪制基礎(chǔ)的對話框圖案的代碼示例

Haorooms   發(fā)布時間：2016-05-20 12:00:23   作者：Aaron   我要評論
氣泡式對話框在Web頁面上如今也十分普及和常見,對話框中三角形的朝向關(guān)鍵在于before偽元素的定位,接下來我們就來看一下使用CSS繪制基礎(chǔ)的對話框圖案的代碼示例

如下圖：左側(cè)三角形
2016520120027789.png (186×110)

css代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #talkbubble {   
  2.     margin-left:30px;   
  3.    width: 120px;    
  4.    height: 80px;    
  5.    background: red;   
  6.    position: relative;   
  7.    -moz-border-radius:    10px;    
  8.    -webkit-border-radius: 10px;    
  9.    border-radius:         10px;   
  10. }   
  11. #talkbubble:before {   
  12.    content:"";   
  13.    position: absolute;   
  14.    rightright: 100%;   
  15.    top: 26px;   
  16.    width: 0;   
  17.    height: 0;   
  18.    border-top: 13px solid transparent;   
  19.    border-right: 26px solid red;   
  20.    border-bottom: 13px solid transparent;   
  21. }  

其實，本案例的精華就是三角形的繪制，那么如何繪制三角形呢？我在這里總結(jié)一下！

上三角形，上三角形，頂部是尖的，所以用border-left，border-right，和border-bottom可以實現(xiàn)，給bottom一個顏色，其他設(shè)置為transparent

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #triangle-up {   
  2.     width: 0;   
  3.     height: 0;   
  4.     border-left: 50px solid transparent;   
  5.     border-right: 50px solid transparent;   
  6.     border-bottom: 100px solid red;   
  7. }  

同理，大家可以判斷一下如下代碼分別是什么樣的三角形！

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #triangle-down {   
  2.     width: 0;   
  3.     height: 0;   
  4.     border-left: 50px solid transparent;   
  5.     border-right: 50px solid transparent;   
  6.     border-top: 100px solid red;   
  7. }    
  8.   
  9. #triangle-left {   
  10.     width: 0;   
  11.     height: 0;   
  12.     border-top: 50px solid transparent;   
  13.     border-right: 100px solid red;   
  14.     border-bottom: 50px solid transparent;   
  15. }   
  16.   
  17.  #triangle-rightright {   
  18.     width: 0;   
  19.     height: 0;   
  20.     border-top: 50px solid transparent;   
  21.     border-left: 100px solid red;   
  22.     border-bottom: 50px solid transparent;   
  23. }    
  24.   
  25. #triangle-topleft {   
  26.     width: 0;   
  27.     height: 0;   
  28.     border-top: 100px solid red;    
  29.     border-right: 100px solid transparent;             
  30. }   
  31. #triangle-topright {   
  32.     width: 0;   
  33.     height: 0;   
  34.     border-top: 100px solid red;    
  35.     border-left: 100px solid transparent;   
  36. }   
  37. #triangle-bottomleft {   
  38.     width: 0;   
  39.     height: 0;   
  40.     border-bottom: 100px solid red;    
  41.     border-right: 100px solid transparent;     
  42. }     
  43.   
  44. #triangle-bottomright {   
  45.     width: 0;   
  46.     height: 0;   
  47.     border-bottom: 100px solid red;    
  48.     border-left: 100px solid transparent;   
  49. }  

判斷出上面代碼分別代表什么三角形嗎？沒錯，我的命名是根據(jù)三角形的方向來的。大家可以試一下。三角形會寫了，那么對話框就迎刃而解了！ 不管是左側(cè)的，還是上面的，只要改變一下before偽類的定位，就可以實現(xiàn)了。

當(dāng)然，三角形的寫法是很基礎(chǔ)的。你也可以用css繪制出五角星、六角星、多邊形、愛心等等。當(dāng)然有些符號是不常用的，用的最多的還是三角形。

相關(guān)文章

  • CSS3中設(shè)置3D變形的transform-style屬性詳解

    transform-style經(jīng)常被用來做三維空間坐標(biāo)系中的圖形變換,下面我們就來看看CSS3中設(shè)置3D變形的transform-style屬性詳解,需要的朋友可以參考下
    2016-05-23

  • css 元素選擇器的簡單實例

    下面小編就為大家?guī)硪黄猚ss 元素選擇器的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-23

  • css border屬性的使用方法和技巧

    下面小編就為大家?guī)硪黄猚ss border屬性的使用方法和技巧。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-23

  • css sprite簡單實例

    下面小編就為大家?guī)硪黄猚ss sprite簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-23

  • CSS3中的Transition過度與Animation動畫屬性使用要點

    這篇文章主要介紹了CSS3中的Transition過度與Animation動畫屬性使用要點Transition和Animation能被用來制作基本的頁面圖片動態(tài)效果,當(dāng)然進(jìn)一步的控制還是需要JavaScript的
    2016-05-20

  • CSS中:before和:after偽元素使用的奇技淫巧

    :before和:after偽元素在CSS中除了被用來添加元素、加小標(biāo)、清浮動等,還有很多妙用之處,接下來我們就來看一兩個CSS中:before和:after偽元素使用的奇技淫巧
    2016-05-20

  • CSS凹型導(dǎo)航按鈕效果的實現(xiàn)代碼

    下面小編就為大家?guī)硪黄狢SS凹型導(dǎo)航按鈕效果的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧。祝大家游戲愉快哦
    2016-05-20

  • CSS3 magic帶64種動畫庫特效源碼

    magic.css是一套帶64種動畫效果的CSS3動畫庫。全部使用CSS3 animation動畫來完成
    2016-05-19

  • CSS文本超出指定寬度后隱藏并顯示為省略號的實現(xiàn)方法

    下面小編就為大家?guī)硪黄狢SS文本超出指定寬度后隱藏并顯示為省略號的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-05-24

最新評論