您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“如何使用CSS制作三角形和按鈕”,內(nèi)容簡而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何使用CSS制作三角形和按鈕”這篇文章吧。
我先說如何制作三角形吧,相信大家在平時(shí)逛網(wǎng)站的時(shí)候都會(huì)看到一些導(dǎo)航欄中的三角形吧,比如說:
網(wǎng)易首頁的頭部菜單欄中,也會(huì)有這樣的三角形
當(dāng)鼠標(biāo)經(jīng)過時(shí),三角形會(huì)垂直翻轉(zhuǎn),如下
現(xiàn)在我分享制作三角形的做法,主要是利用邊框做成的
首先,四個(gè)三角形合并在一起的正方形,也就是正方形的四條邊框形成的四個(gè)三角形
源代碼:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正方形</title> <style> .div{ width: 0px; height: 0px; border-top:50px solid red; border-bottom:50px solid green; border-left:50px solid yellow; border-right:50px solid blue; /*注意:四條邊框的寬度必須相同!*/ } </style> </head> <body> <div class="div"></div> </body> </html>
效果如下:
現(xiàn)在,要把其中一個(gè)三角形取出來,其實(shí)就是要把其他的隱藏掉
源代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作三角形箭頭</title> <style> .arrow{ width:0; height:0; border-top:50px solid #000; /*設(shè)置并顯示上邊框*/ border-bottom:none; /*不設(shè)置下邊框*/ border-left:50px solid transparent; /*設(shè)置但隱藏左邊框*/ border-right:50px solid transparent; /*設(shè)置但隱藏右邊框*/ } .arrow:hover{ border-top:none; /*鼠標(biāo)經(jīng)過時(shí),不設(shè)置上邊框*/ border-bottom:50px solid #000; /*鼠標(biāo)經(jīng)過時(shí),設(shè)置并顯示下邊框*/ } </style> </head> <body> <div class="arrow"></div> </body> </html>
效果如下:
接下來,我分享一種按鈕的做法
主要是利用邊框樣式、盒子陰影和偽類效果來實(shí)現(xiàn)的
源代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS制作按鈕</title> <style type="text/css"> .btn{ width:100px; height:100px; background:#ccc; border-radius:50%; box-shadow:5px 5px 10px #000; /*設(shè)置外陰影*/ } .btn:active{ background:#bbb; box-shadow:5px 5px 10px #000 inset; /*設(shè)置內(nèi)陰影*/ } .btn div{ font-size:30px; font-family:"微軟雅黑"; color:blue; float:left; margin-top:28px; margin-left:20px; } </style> </head> <body> <div class="btn"> <a href="###"> <div>開始</div> </a> </div> </body> </html>
效果:
以上是“如何使用CSS制作三角形和按鈕”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。