純CSS制作各種各樣的網(wǎng)頁圖標（三角形、暫停按鈕、下載箭頭、加號等）
發(fā)布時間：2018-03-27 15:05:43 作者：BluesQian 
我要評論
我要評論這篇文章主要介紹了純CSS制作各種各樣的網(wǎng)頁圖標（三角形、暫停按鈕、下載箭頭、加號等）的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
三角形
<div class="box"></div>
<style>
.box{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid red;
}
</style>
平行四邊形圖標
<div class="box"></div>
<style>
.box{
width: 50px;
height: 50px;
margin: 100px auto;
background-color: red;
transform: skew(-25deg);
}
</style>
暫停按鈕
<div class="box"></div>
<style>
.box{
width: 50px;
height: 50px;
margin: 100px auto;
color: #000;
border: 1px solid;
border-radius: 50%;
outline: 10px solid;
outline-offset: -26px;
}
</style>
暫停按鈕的實現(xiàn)原理就是邊框用border，里面的正方形用outline。因為outline有一個offset屬性可以用來設置偏移量，并且是按照比例來的。
其實如果再將outline-offset的值設置小一點，一個加好就出來了
加號
<div class="box"></div>
<style>
.box{
width: 50px;
height: 50px;
margin: 100px auto;
color: #000;
border: 1px solid;
border-radius: 50%;
outline: 10px solid;
outline-offset: -35px;
}
</style>
如果再將其旋轉(zhuǎn)，就變成了一個關(guān)閉按鈕
關(guān)閉按鈕
<div class="box"></div>
<style>
.box{
width: 50px;
height: 50px;
margin: 100px auto;
color: #000;
border: 1px solid;
border-radius: 50%;
outline: 10px solid;
outline-offset: -35px;
transform: rotate(45deg);
}
漢堡按鈕
<div class="box"></div>
<style>
.box{
width: 50px;
height: 0px;
margin: 100px auto;
box-shadow: 36px 10px 0 3px red,
36px 0 0 3px red,
36px 20px 0 3px red;
}
</style>
漢堡按鈕2：
<div class="box"></div>
<style>
.box{
width: 30px;
height: 3px;
margin: 100px auto;
padding: 2px 0;
border-top: 3px solid red;
border-bottom: 3px solid red;
background-clip: content-box;
background-color: red;
}
</style>
單選按鈕
因為box-shadow會按比例縮放，因此將第一個值設置為白色，然后將第二個值設置的比第一個值大就可以了
<div class="box"></div>
<style>
.box{
width: 30px;
height: 30px;
margin: 100px auto;
background-color: #000;
border-radius: 50%;
box-shadow: 0 0 0 5px #fff,0 0 0 10px #000;
}
</style>
圓圈中帶個十字
<div class="box"></div>
<style>
.box {
width: 30px;
height: 30px;
margin: 100px auto;
background-color: #000;
border-radius: 50%;
box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;
outline: 36px solid #fff;
outline-offset: -50px;
}
</style>
田型圖標
<div class="box"></div>
<style>
.box {
width: 0;
margin: 100px auto;
border: 3px solid red;
outline: 6px dotted red;
outline-offset: 6px;
}
</style>
下載箭頭
使用border制作三角形，使用box-shadow制作正方形，主要用了偏移
<div class="box"></div>
<style>
.box {
width: 0;
margin: 100px auto;
color: red;
border: 8px solid transparent;
border-top: 8px solid red;
box-shadow: 0 -12px 0 -4px;
}
</style>
書簽
實現(xiàn)這種效果的原理就是講三角形設置成背景色，這樣空心的三角形就出現(xiàn)了
<div class="box"></div>
<style>
.box {
width: 0;
height: 8px;
background-color:orange;
border: 8px solid transparent;
border-bottom: 8px solid #fff;
}
</style>
兩個半圓圖標
這個比較簡單，就是通過漸變函數(shù)來實現(xiàn)，然后來個圓角邊框
<div class="box"></div>
<style>
.box {
width: 50px;
height: 50px;
border-radius: 50%;
background-image: linear-gradient(to right,#ccc 50%,#000 50%);
}
</style>
禁用圖標
外圈利用圓角邊框，里面的豎線用漸變來做，然后再用旋轉(zhuǎn)屬性即可
<div class="box"></div>
<style>
.box {
width: 50px;
height: 50px;
border-radius: 50%;
border:2px solid #000;
background: linear-gradient(to right,#fff 45%,#000 45%,#000 45%,#fff 55%);
transform: rotate(40deg);
}
</style>
左右箭頭圖標
既然能做出一個三角形，那么就可以做出兩個三角形。
<div class="box"></div>
<style>
.box {
width: 0;
height: 0;
margin: 100px auto;
border: 10px solid transparent;
border-left: 10px solid red;
-webkit-box-reflect: left 5px;
box-reflect:left 5px;
}
</style>
需要在Chrome瀏覽器中打開，因為其他瀏覽器或許不支持
鷹嘴圖標
<div class="box"></div>
<style>
.box {
width: 32px;
margin: 100px auto;
border-top: 50px solid transparent;
border-right: 22px solid #096;
border-bottom-right-radius: 100%;;
}
</style>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用CSS和Bootstrap圖標制作上下跳動的指示箭頭動畫效果
有時侯頁面很長，需要指示箭頭告訴用戶下面還有東西。下面腳本之家小編給大家?guī)砹耸褂肅SS和Bootstrap圖標制作上下跳動的指示箭頭動畫效果，感興趣的朋友一起看看吧2018-06-04- css3功能非常強大，之前需要圖片完成的icon，現(xiàn)在我們只需要幾段css代碼就可以實現(xiàn)此功能。下面給大家分享純css制作的圓，橢圓，三角形箭頭圖標，非常使用，需要的朋友參考2016-03-30
- 本文為大家介紹下使用純css實現(xiàn)的交互小三角箭頭圖標，示例代碼如下，感興趣的朋友可以參考下2013-12-10
- 準備添加tooltips提示信息效果.實現(xiàn)很容易，但我想要讓提示功能具有三角形的指示圖標，本文兩種實現(xiàn)方式: 使用或不使用 before 和 :after 偽元素，示例如下，有此需求的朋2013-08-09
CSS多級數(shù)字序號的目錄列表(2.2.1. 2.2.2 列表序號)
這篇文章主要介紹了CSS多級數(shù)字序號的目錄列表(2.2.1. 2.2.2 列表序號),通過css代碼定義將數(shù)字多級列表展示出來,,需要的朋友可以參考下2017-08-14- 這篇文章主要介紹了GitHub倡導的CSS編寫風格及文件目錄部署指南,包括SCSS結(jié)構(gòu)部署和px的使用等方面,需要的朋友可以參考下2016-04-15
完美解決調(diào)用上級目錄中的css樣式文件的路徑問題
調(diào)用上級目錄中的css樣式的路徑問題，為什么樣式文件沒有起到效果，想必有很多的朋友遇到過吧，下面為大家分享個不錯的解決方法，需要的朋友不要錯過2013-11-20- 這篇文章主要介紹了CSS拾遺之箭頭,目錄,圖標的實現(xiàn)代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-14
