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

純CSS繪制三角形箭頭圖案技術(shù)解析

  發(fā)布時間：2016-06-28 15:26:55   作者：佚名   我要評論
這篇文章主要為大家詳細(xì)介紹了純CSS繪制三角形箭頭圖案技術(shù)，如何使用:before和:after繪制CSS三角形，感興趣的小伙伴們可以參考一下

最近我想修改一下這個網(wǎng)站，我想在上面放置一個提示框。這是很容易，但我想讓提示框上有一個三角形的箭頭?？墒牵幌氲竭@需要使用圖片，并且各種顏色，各種方向的箭頭要準(zhǔn)備無數(shù)種，這幾乎是一種災(zāi)難。幸運(yùn)的是，MooTools的核心開發(fā)著Darren Waddell告訴了我一個非常棒的技術(shù)：用CSS繪制三角形箭頭。使用純CSS，你只需要很少的代碼就可以創(chuàng)作出各種瀏覽器都兼容的三角形箭頭！

CSS代碼

CSS Code復(fù)制內(nèi)容到剪貼板
  1. /* create an arrow that points up */  
  2. div.arrow-up {   
  3.  width: 0;    
  4.  height: 0;    
  5.  border-left: 5px solid transparent;  /* left arrow slant */  
  6.  border-right: 5px solid transparent; /* right arrow slant */  
  7.  border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */  
  8.  font-size: 0;   
  9.  line-height: 0;   
  10. }   
  11.   
  12. /* create an arrow that points down */  
  13. div.arrow-down {   
  14.  width: 0;    
  15.  height: 0;    
  16.  border-left: 5px solid transparent;   
  17.  border-right: 5px solid transparent;   
  18.  border-top: 5px solid #2f2f2f;   
  19.  font-size: 0;   
  20.  line-height: 0;   
  21. }   
  22.   
  23. /* create an arrow that points left */  
  24. div.arrow-left {   
  25.  width: 0;    
  26.  height: 0;    
  27.  border-bottom: 5px solid transparent;  /* left arrow slant */  
  28.  border-top: 5px solid transparent; /* right arrow slant */  
  29.  border-right: 5px solid #2f2f2f; /* bottom, add background color here */  
  30.  font-size: 0;   
  31.  line-height: 0;   
  32. }   
  33.   
  34. /* create an arrow that points right */  
  35. div.arrow-rightright {   
  36.  width: 0;    
  37.  height: 0;    
  38.  border-bottom: 5px solid transparent;  /* left arrow slant */  
  39.  border-top: 5px solid transparent; /* right arrow slant */  
  40.  border-left: 5px solid #2f2f2f; /* bottom, add background color here */  
  41.  font-size: 0;   
  42.  line-height: 0;   
  43. }   

繪制這些三角形的關(guān)鍵在于，你要讓箭頭所指方向的兩個側(cè)邊有很粗的邊框。而背向箭頭方向的一邊也是同樣粗的邊框，而這條邊的顏色就是你的三角形的顏色。邊框越粗，三角形越大。用這種方法你可以繪制出各種顏色、各種大小、各種朝向的箭頭。最妙的是，你只需要幾行CSS代碼就能實現(xiàn)這種效果。

使用:before和:after繪制CSS三角形

上面的CSS例子使用的是真正的頁面元素進(jìn)行繪制，但有時候這個真正的元素還有它用，你不能走上面直接進(jìn)行操作，這是怎么辦？純CSS的三角形其實還可以使用偽元素(pseudo-element)進(jìn)行繪制。下面就是繪制方法：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. div.tooltip {   
  2.  /* tooltip content styling in here; nothing to do with arrows */  
  3. }   
  4.   
  5. /* shared with before and after */  
  6. div.tooltip:before, div.tooltip:after {   
  7.  content: ' ';   
  8.  height: 0;   
  9.  position: absolute;   
  10.  width: 0;   
  11.  border: 10px solid transparent; /* arrow size */  
  12. }   
  13.   
  14. /* these arrows will point up */  
  15.   
  16. /* top-stacked, smaller arrow */  
  17. div.tooltip:before {   
  18.  border-bottom-color: #fff;  /* arrow color */  
  19.   
  20.  /* positioning */  
  21.  position: absolute;   
  22.  top: -19px;   
  23.  left: 255px;   
  24.  z-index: 2;   
  25. }   
  26.   
  27. /* arrow which acts as a background shadow */  
  28. div.tooltip:after {   
  29.  border-bottom-color: #333;  /* arrow color */  
  30.   
  31.  /* positioning */  
  32.  position: absolute;   
  33.  top: -24px;   
  34.  left: 255px;   
  35.  z-index: 1;   
  36. }   

背向箭頭的那一側(cè)的邊框的顏色就是三角形箭頭的顏色。畫這個箭頭并不需要同時使用:before和:after兩個偽元素——一個就夠了。而另外一個，你可以把它用作前一個的背景陰影或背景邊。

真應(yīng)該早點知道這種技術(shù)！我相信在將來做界面改進(jìn)時這種簡潔省事的技術(shù)將派上大用途。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • CSS繪制三角形的實現(xiàn)代碼(border法)

    這篇文章主要介紹了CSS繪制三角形的實現(xiàn)代碼(border法)的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-11

  • 利用css繪制三角形的方法及拓展

    相信大家在日常網(wǎng)站布局中，經(jīng)常遇到一些三角形形狀的按鈕，有的人可能會想到用圖片代替，其實我們利用css就可以實現(xiàn)，本文給大家介紹了利用css繪制三角形的方法，以及一些
    2016-10-17

  • Html+CSS繪制三角形圖標(biāo)

    這篇文章主要為大家詳細(xì)介紹了Html+CSS繪制三角形圖標(biāo)的相關(guān)代碼，很多網(wǎng)頁都有三角形的圖標(biāo)，通常是切的圖片，這里可以用css3+html寫出三角形，感興趣的小伙伴們可以參考
    2016-06-17

  • css繪制透明三角形

    這篇文章主要教大家使用css繪制透明三角形，css繪制三角形很簡單，如何繪制透明的三角形，本文為大家解決這個問題，感興趣的小伙伴們可以參考一下
    2016-03-10

  • 用CSS3繪制三角形的簡單方法

    這篇文章主要介紹了用CSS3繪制三角形的簡單方法,是CSS前端繪圖的基礎(chǔ),需要的朋友可以參考下
    2015-07-17

  • 純CSS繪制三角形箭頭效果

    最近我想修改一下這個網(wǎng)站，我想在上面放置一個提示框。這是很容易，但我想讓提示框上有一個三角形的箭頭。可是，一想到這需要使用圖片，并且各種顏色，各種方向的箭頭要準(zhǔn)
    2014-05-07

  • 用CSS代碼繪制三角形 純CSS繪制三角形的代碼

    用CSS也可以畫畫了.不錯哦.下面我們來畫一個三角形看看
    2012-06-04

  • CSS中三角形的繪制與巧妙應(yīng)用實例詳解

    這篇文章主要介紹了CSS中三角形的繪制與巧妙應(yīng)用，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-09-11

最新評論