CSS實現(xiàn)小圖標

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

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

關(guān)閉圖標

.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);
}

箭頭圖標

右箭頭

.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圖標庫 CSS.GG圖標庫小圖標背景小圖標

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/116645.html

相關(guān)文章

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

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

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

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

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

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

shadowbook 2021-09-23 11:57 評論0 收藏0
CSS進階篇--fontAwesome代替網(wǎng)頁icon小圖標

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

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

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

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

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

Hegel_Gu 2019-08-21 12:20 評論0 收藏0