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