CSS實現小圖標

NusterCache 發布于2019-08-30 15:53 / 2858人閱讀

摘要：關閉圖標箭頭圖標右箭頭左箭頭下箭頭上箭頭三角形下三角上三角右三角左三角

關閉圖標

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116645.html

淺談 CSS Sprites 雪碧圖應用

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

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

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

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

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

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

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

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

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

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

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

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