您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)純CSS怎么制作各種各樣的網(wǎng)頁(yè)圖標(biāo),小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
三角形
<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ū)簽
實(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>
關(guān)于“純CSS怎么制作各種各樣的網(wǎng)頁(yè)圖標(biāo)”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。