您現在的位置是:電腦技術吧?>? 編程技術 ??>??三角形里有個箭頭,三角形上下箭頭??>??正文詳情

三角形里有個箭頭,三角形上下箭頭

愚陽波2019-11-18 14:10:37 人圍觀
簡介三角形雙向箭頭我想修改這個網站最近。我想在上面放一個提示框。這很簡單,但我想要一個三角箭頭在提示框。然而,認為它需要不同方向的圖片、顏色和箭頭幾乎是一場災難。幸運

最近我想修改一下這個網站,我想在上面放置一個提示框。

這是很容易,但我想讓提示框上有一個三角形的箭頭。

可是,一想到這需要使用圖片,并且各種顏色,各種方向的箭頭要準備無數種,這幾乎是一種災難。

幸運的是,MooTools的核心開發著Darren Waddell告訴了我一個非常棒  使用純CSS,你只需要很少的代碼就可以創作出各種瀏覽器都兼容的三角形箭頭!

  CSS代碼  復制代碼  代碼如下:  /* create an arrow that points up */  div.arrow-up {  width: 0;  height: 0;  border-left: 5px solid transparent; /* left arrow slant */  border-right: 5px solid transparent; /* right arrow slant */  border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */  font-size: 0;  line-height: 0;  }  /* create an arrow that points down */  div.arrow-down {  width: 0;  height: 0;  border-left: 5px solid transparent;  border-right: 5px solid transparent;  border-top: 5px solid #2f2f2f;  font-size: 0;  line-height: 0;  }  /* create an arrow that points left */  div.arrow-left {  width: 0;  height: 0;  border-bottom: 5px solid transparent; /* left arrow slant */  border-top: 5px solid transparent; /* right arrow slant */  border-right: 5px solid #2f2f2f; /* bottom, add background color here */  font-size: 0;  line-height: 0;  }  /* create an arrow that points right */  div.arrow-right {  width: 0;  height: 0;  border-bottom: 5px solid transparent; /* left arrow slant */  border-top: 5px solid transparent; /* right arrow slant */  border-left: 5px solid #2f2f2f; /* bottom, add background color here */  font-size: 0;  line-height: 0;  }  繪制這些三角形的關鍵在于,你要讓箭頭所指方向的兩個側邊有很粗的邊框。

而背向箭頭方向的一邊也是同樣粗的邊框,而這條邊的顏色就是你的三角形的顏色。

邊框越粗,三角形越大。

用這種方法你可以繪制出各種顏色、各種大小、各種朝向的箭頭。

最妙的是,你只需要幾行CSS代碼就能實現這種效果。

  使用:before和:after繪制CSS三角形  上面的CSS例子使用的是真正的頁面元素進行繪制,但有時候這個真正的元素還有它用,你不能走上面直接進行操作,這是怎么辦?純CSS的三角形其實還可以使用偽元素(pseudo-element)進行繪制。

下面就是繪制方法:  復制代碼  代碼如下:  div.tooltip {  /* tooltip content styling in here; nothing to do with arrows */  }  /* shared with before and after */  div.tooltip:before, div.tooltip:after {  content: ' ';  height: 0;  position: absolute;  width: 0;  border: 10px solid transparent; /* arrow size */  }  /* these arrows will point up */  /* top-stacked, smaller arrow */  div.tooltip:before {  border-bottom-color: #fff; /* arrow color */  /* positioning */  position: absolute;  top: -19px;  left: 255px;  z-index: 2;  }  /* arrow which acts as a background shadow */  div.tooltip:after {  border-bottom-color: #333; /* arrow color */  /* positioning */  position: absolute;  top: -24px;  left: 255px;  z-index: 1;  }  背向箭頭的那一側的邊框的顏色就是三角形箭頭的顏色。

畫這個箭頭并不需要同時使用:before和:after兩個偽元素一個就夠了。

而另外一個,你可以把它用作前一個的背景陰影或背景邊。

  真應該早點知道這種技術!我相信在將來做界面改進時這種簡潔省事的技術將派上大用途

版權聲明:本文由 愚陽波 整理編輯。

原標題:三角形箭頭里面有個5,一個三角形里面有箭頭

轉載注明出處:http://www.dn9ww09s.icu/program/13525.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 硬盤顯示0字節可用,硬盤顯示0字節

    硬盤顯示0字節可用,硬盤顯示0字節 相關圖片硬盤屬性顯示0字節有網友在使用電腦的過程中會出現某個盤符打不開的情況,原來幾十、幾百克的空間變成了0字節。怎么了?如何使0字節硬盤恢復正常?當0字節硬盤可用時,應該是硬...

  • 怎么在站內搜索,如何做一個站內搜索

    怎么在站內搜索,如何做一個站內搜索 相關圖片九息站內搜索Frontpage不僅可以幫助我們快速開始網頁制作,還可以為網站制作一個簡單的搜索引擎,可以說是網頁制作和網頁搜索的結合。當然,在創建信息搜索平臺之前,你應該先搜...

  • 瀏覽器怎么導入書簽,瀏覽器書簽怎么導出

    瀏覽器怎么導入書簽,瀏覽器書簽怎么導出 相關圖片QQ瀏覽器書簽導出我相信我的很多朋友都在使用奧本瀏覽器。你知道如何從Auburn瀏覽器導入書簽嗎?如何從Auburn瀏覽器導出書簽?現在,超人軟件編輯想向您介紹奧本瀏覽器的相關內瀏覽...

  • 電視上那些炫麗的效果是怎么制作的,ps制作炫麗效果閃電字

    電視上那些炫麗的效果是怎么制作的,ps制作炫麗效果閃電字 相關圖片七色光教育怎么樣這個例子向朋友介紹了如何使用焰火來產生美麗的眩光效果。主要研究了刷子、濾料、復印、變形、梯度填充、混合模式和筆路徑工具的應用。希望朋友喜歡!最終效...

  • buzz桌面怎么用,buzz桌面怎么用不了

    buzz桌面怎么用,buzz桌面怎么用不了 相關圖片buzz桌面停運buzz桌面作為一款功能強大的桌面美化軟件,深受眾多Android用戶的喜愛。很多用戶不知道如何將buzz桌面設置為默認桌面,以及如何切換中文。現在,我要學習超buzz桌面圖片...

  • 畫面放大縮小,視頻放大縮小效果

    畫面放大縮小,視頻放大縮小效果 相關圖片ppt放大縮小步驟1:我們創建一個新的flash文檔,幀速率設置為40。我們在主場景中導入圖片或繪制某些內容,然后右鍵單擊將其轉換為組件電影剪輯組件步驟2:庫中是否有組件1?pr局部放...

  • 為什么頭條換頭像換不了,頭條多多怎么換頭像

    為什么頭條換頭像換不了,頭條多多怎么換頭像 相關圖片東方頭條怎么換頭像今天的頭條作為一個人人都可以成為作者的自媒體平臺,相信很多小伙伴都想在上面發表自己的文章。那么,你知道今天在哪里改標題嗎?今天的標題貼在哪里?現...

  • 菜鳥裹裹的運費是怎么支付,菜鳥裹裹怎么給運費啊

    菜鳥裹裹的運費是怎么支付,菜鳥裹裹怎么給運費啊 相關圖片菜鳥裹裹他人能代付運費嗎新手包裝是一款實用的快遞軟件,您可以通過它輕松完成郵件服務。那新秀包裝的運費怎么付?新秀包裝快遞怎么寄?接下來,讓超人軟件編輯為您解答。希...

  • 鋪底,鋪底什么意思

    鋪底,鋪底什么意思 相關圖片陶粒可以當魚缸鋪底嗎最近在做一個項目-口袋收藏夾。簡言之,我想在布袋頁上收集我最喜歡的圖片,它使用了iframe的許多方面,如下所示:1。作為一個覆蓋底部的彈出層,如果你已經...

  • 內存修改器有什么用,怎么用內存修改器修改內購

    內存修改器有什么用,怎么用內存修改器修改內購 相關圖片怎么用gg修改器修改內購這里的內存修改不是指計算機的物理內存,而是使用內存修改器來修改游戲內存數據,達到游戲作弊的目的。通用內存修飾符是CE。因此,本文主要介紹CE內存修...

熱評文章

  • 怎么關彈幕,關彈幕

    怎么關彈幕,關彈幕 相關圖片為什么b站彈幕自動關作為一款有趣的交友軟件,rightmost自然受到很多玩家的喜愛。那么,你知道怎么關上最右邊的彈幕嗎?如何回復評論?現在,超人軟件編輯想為您介紹一些關于最右...

  • u盤大小為0無法格式化,win7光盤0字節可讀不可寫

    u盤大小為0無法格式化,win7光盤0字節可讀不可寫 相關圖片u盤無法格式化修復要在計算機之間移動一些非大文件,U盤絕對是最合適的載體之一。不過,也有網友反映,使用U盤時出現0字節無法格式化的錯誤提示。我該怎么辦?通常,這種情況是...

  • 網頁游戲特效制作,制作游戲特效的軟件有哪些

    網頁游戲特效制作,制作游戲特效的軟件有哪些 相關圖片手機游戲特效制作下面是一個特殊的效果,它是從一個頁面切換到另一個頁面1的效果。按Ctrl n創建一個新頁面,選擇基本頁面HTML,然后創建它2。然后我們插入一張圖片,使我們的效游...

  • win10directx修復工具,directx修復工具在哪里打開

    win10directx修復工具,directx修復工具在哪里打開 相關圖片directx修復工具需要聯網嗎DirectX修復工具是一個功能強大的系統修復工具。然而,許多人不知道如何使用DirectX修復工具。DirectX修復工具的用途是什么?接下來,超人軟件會給你電腦dir...

  • title屬性,標簽title屬性

    title屬性,標簽title屬性 相關圖片title如果要為手機、平板電腦和輔助技術的用戶隱藏某些內容,請使用title屬性,但僅對鍵盤用戶而言,detail HTML本身的title屬性存在問題。問題是,它在一title1...

  • 火山小視頻關注收費嗎,火山小視頻怎樣查找關注的人

    火山小視頻關注收費嗎,火山小視頻怎樣查找關注的人 相關圖片火山小視頻通過手機號查好友作為一款可以通過發布視頻賺錢的直播軟件,火山視頻獲得了很多用戶的支持。所以你知道怎么關注小火山的視頻嗎你覺得小火山的視頻怎么樣?現在,跟...

  • smartscreen篩選器阻止,smartscreen篩選器在哪

    smartscreen篩選器阻止,smartscreen篩選器在哪 相關圖片smartscreen可以關閉嗎當我們使用瀏覽器瀏覽網頁時,有時會遇到這樣的提示:smartscreen篩選器已阻止下載。Smartscreen過濾器包括Internet Explorer和msmartscreen關閉不了...

  • 網頁界面設計,網頁設計頁面

    網頁界面設計,網頁設計頁面 相關圖片網頁設計排版與網站訪問者溝通的方式有很多種,但最典型、最直接的方式是通過網頁了解我們的溝通方式。隨著網站設計的日益多樣化,網頁的設計越來越受到設計者和設計團隊的重...

  • furmark有什么用,furmark怎么使用

    furmark有什么用,furmark怎么使用 相關圖片orthos怎么用Furmark是ozone3d開發的OpenGL基準測試工具,主要通過多次測試,用來測試顯卡的性能和穩定性,支持五種語言,包括簡體中文如何使用Furmark:顯卡要用什么軟件烤機...

  • 炫酷代碼,炫酷代碼教程

    炫酷代碼,炫酷代碼教程 相關圖片黑客炫酷代碼index.html代碼如下:ul class=menuliahref=#Home/a/lilia href=#s1Menu1/aul class=submenvbs炫酷代碼...

關注微信

变脸官网查询