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

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

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

如下圖：左側(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. }  

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

上三角形，上三角形，頂部是尖的，所以用border-left，border-right，和border-bottom可以實(shí)現(xiàn)，給bottom一個(gè)顏色，其他設(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. }  

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

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

相關(guān)文章

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

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

  • css 元素選擇器的簡(jiǎn)單實(shí)例

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

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

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

  • css sprite簡(jiǎn)單實(shí)例

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

  • CSS3中的Transition過度與Animation動(dòng)畫屬性使用要點(diǎn)

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

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

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

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

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

  • CSS3 magic帶64種動(dòng)畫庫(kù)特效源碼

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

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

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

最新評(píng)論