CSS實(shí)現(xiàn)小圖標(biāo)

NusterCache 發(fā)布于2019-08-30 15:53 / 2872人閱讀

摘要：關(guān)閉圖標(biāo)箭頭圖標(biāo)右箭頭左箭頭下箭頭上箭頭三角形下三角上三角右三角左三角

關(guān)閉圖標(biāo)

.close {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
}
.close:before {
  content: "";
  display: inline-block;
  position: absolute;
  top: 6px;
  width: 12px;
  border-top: 1px solid #ffffd;
  transform: rotate(45deg);
}
.close:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 6px;
  width: 12px;
  border-top: 1px solid #ffffd;
  transform: rotate(-45deg);
}

箭頭圖標(biāo)

右箭頭

.arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #ffffd;
  border-right: 1px solid #ffffd;
  transform: rotate(45deg);
}

左箭頭

.arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-bottom: 1px solid #ffffd;
  border-left: 1px solid #ffffd;
  transform: rotate(45deg);
}

下箭頭

.arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1px solid #ffffd;
  border-bottom: 1px solid #ffffd;
  transform: rotate(45deg);
}

上箭頭

.arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 1px solid #ffffd;
  border-left: 1px solid #ffffd;
  transform: rotate(45deg);
}

三角形

下三角

.triangle {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  overflow: hidden;
}
.triangle:after {
  content: "";
  position: absolute;
  top: 2px;
  display: inline-block;
  border-top: 4px solid #ffffd;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
}

上三角

.triangle {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  overflow: hidden;
}
.triangle:after {
  content: "";
  position: absolute;
  bottom: 2px;
  display: inline-block;
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #ffffd;
  border-left: 4px solid transparent;
}

右三角

.triangle {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  overflow: hidden;
}
.triangle:after {
  content: "";
  position: absolute;
  left: 2px;
  display: inline-block;
  border-top: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 4px solid #ffffd;
}

左三角

.triangle {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  overflow: hidden;
}
.triangle:after {
  content: "";
  position: absolute;
  right: 2px;
  display: inline-block;
  border-top: 4px solid transparent;
  border-right: 4px solid #ffffd;
  border-bottom: 4px solid transparent;
  border-left: 4px solid transparent;
}

GPU云服務(wù)器云服務(wù)器 CSS圖標(biāo)庫 CSS.GG圖標(biāo)庫小圖標(biāo) 背景小圖標(biāo)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116645.html

相關(guān)文章

淺談 CSS Sprites 雪碧圖應(yīng)用

摘要：編寫配置文件，以下是關(guān)鍵配置代碼雪碧圖合并輸出到文件參數(shù)執(zhí)行目錄參數(shù)生成的和圖片的文件名之所以推薦，是因?yàn)榉浅５撵`活，看懂模塊的可以根據(jù)你的項(xiàng)目情況編寫對(duì)應(yīng)的配置文件。 showImg(https://segmentfault.com/img/bVGpAw?w=518&h=156); 前言網(wǎng)站開發(fā)90%會(huì)用到小圖標(biāo)，多小圖標(biāo)調(diào)用顯示是前端開發(fā)常見的問題；目前小圖標(biāo)顯示常見有兩種方式...

MkkHou 2019-08-30 13:12 評(píng)論0 收藏0
iconfont實(shí)踐小結(jié)

摘要：所以實(shí)現(xiàn)小圖標(biāo)時(shí)雪碧圖跟圖標(biāo)字體會(huì)在一個(gè)網(wǎng)站共存，自定義圖標(biāo)字體為什么比較耗時(shí)，且太復(fù)雜圖標(biāo)無法實(shí)現(xiàn)請(qǐng)往下看開發(fā)流程就了解了。參考資料細(xì)談淺談圖標(biāo)字體向下兼容優(yōu)雅降級(jí)技術(shù)繪制小圖標(biāo)技巧雪碧圖圖標(biāo)字體矢量小圖標(biāo)設(shè)計(jì)本文對(duì)應(yīng)源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關(guān)于雪碧圖的博文，...

bitkylin 2019-08-29 13:00 評(píng)論0 收藏0
css.gg – 一款免費(fèi)開源CSS庫實(shí)現(xiàn)700+圖標(biāo)應(yīng)用前端項(xiàng)目

摘要：支持等格式調(diào)用的圖標(biāo)，圖標(biāo)數(shù)調(diào)用基本上滿足我們大部分的項(xiàng)目需要的小圖標(biāo)。范例以上是部分的應(yīng)用，如果我們需要用到前端業(yè)務(wù)中，可以根據(jù)需要選擇以前我們?cè)陂_發(fā)前端WEB端的時(shí)候，如果需要用到小圖標(biāo)是不是需要讓美工設(shè)計(jì)小圖標(biāo)然后調(diào)用。這樣不僅僅效率低下，而且會(huì)影響到我們前端的速度和管理效率。于是如今我們?cè)谑褂们岸诵D標(biāo)的時(shí)候都會(huì)引用第三方JS、圖標(biāo)庫，在這篇文章中老蔣要介紹的是CSS.GG純CSS代...

shadowbook 2021-09-23 11:57 評(píng)論0 收藏0
CSS進(jìn)階篇--fontAwesome代替網(wǎng)頁icon小圖標(biāo)

摘要：網(wǎng)頁小圖標(biāo)到處可見，如果一個(gè)網(wǎng)頁都是干巴巴的文字和圖片，而沒有小圖標(biāo)，會(huì)顯得非常簡陋。直接看代碼鏈接鏈接鏈接鏈接得出的結(jié)果就是其他應(yīng)用還有其他更加復(fù)雜一點(diǎn)的應(yīng)用，包括固定寬度浮動(dòng)反轉(zhuǎn)旋轉(zhuǎn)疊加圖標(biāo)等。引言奧森圖標(biāo)（Font Awesome）提供豐富的矢量字體圖標(biāo)—通過CSS可以任意控制所有圖標(biāo)的大小，顏色，陰影。網(wǎng)頁小圖標(biāo)到處可見，如果一個(gè)網(wǎng)頁都是干巴巴的文字和圖片，而沒有小圖標(biāo)...

paney129 2019-08-28 18:18 評(píng)論0 收藏0
使用css實(shí)現(xiàn)全兼容tooltip提示框

摘要：在上一篇中，使用實(shí)現(xiàn)了一個(gè)全兼容的三角形圖標(biāo)，這個(gè)三角型圖標(biāo)可以使用于多種場景，比如下拉圖標(biāo)多級(jí)菜單等，這篇我們使用這個(gè)圖標(biāo)通過純來實(shí)現(xiàn)一個(gè)我們常見的提示框。 [toc] 在上一篇post中，使用css實(shí)現(xiàn)了一個(gè)全兼容的三角形圖標(biāo)，這個(gè)三角型圖標(biāo)可以使用于多種場景，比如下拉圖標(biāo)、多級(jí)菜單等，這篇post我們使用這個(gè)圖標(biāo)通過純css來實(shí)現(xiàn)一個(gè)我們常見的tooltip提示框。最終效果圖：...

MSchumi 2019-08-28 17:55 評(píng)論0 收藏0
使用css實(shí)現(xiàn)全兼容tooltip提示框

摘要：在上一篇中，使用實(shí)現(xiàn)了一個(gè)全兼容的三角形圖標(biāo)，這個(gè)三角型圖標(biāo)可以使用于多種場景，比如下拉圖標(biāo)多級(jí)菜單等，這篇我們使用這個(gè)圖標(biāo)通過純來實(shí)現(xiàn)一個(gè)我們常見的提示框。 [toc] 在上一篇post中，使用css實(shí)現(xiàn)了一個(gè)全兼容的三角形圖標(biāo)，這個(gè)三角型圖標(biāo)可以使用于多種場景，比如下拉圖標(biāo)、多級(jí)菜單等，這篇post我們使用這個(gè)圖標(biāo)通過純css來實(shí)現(xiàn)一個(gè)我們常見的tooltip提示框。最終效果圖：...

Hegel_Gu 2019-08-21 12:20 評(píng)論0 收藏0