CSS製作三角形和按鈕 用上一篇博文中關於邊框樣式的知識點，能製作出三角形和按鈕。 我先說如何製作三角形吧，相信大家在平時逛網站的時候都會看到一些導航欄中的三角形吧，比如說： 網易首頁的頭部菜單欄中，也會有這樣的三角形 當滑鼠經過時，三角形會垂直翻轉，如下 現在我分享製作三角形的做法，主要是利用邊框 ...
CSS製作三角形和按鈕
用上一篇博文中關於邊框樣式的知識點，能製作出三角形和按鈕。
我先說如何製作三角形吧，相信大家在平時逛網站的時候都會看到一些導航欄中的三角形吧，比如說：
網易首頁的頭部菜單欄中，也會有這樣的三角形
當滑鼠經過時，三角形會垂直翻轉，如下
現在我分享製作三角形的做法，主要是利用邊框做成的
首先，四個三角形合併在一起的正方形，也就是正方形的四條邊框形成的四個三角形
源代碼：
<!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>
效果如下：
現在，要把其中一個三角形取出來，其實就是要把其他的隱藏掉
源代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>製作三角形箭頭</title> <style> .arrow{ width:0; height:0; border-top:50px solid #000; /*設置並顯示上邊框*/ border-bottom:none; /*不設置下邊框*/ border-left:50px solid transparent; /*設置但隱藏左邊框*/ border-right:50px solid transparent; /*設置但隱藏右邊框*/ } .arrow:hover{ border-top:none; /*滑鼠經過時，不設置上邊框*/ border-bottom:50px solid #000; /*滑鼠經過時，設置並顯示下邊框*/ } </style> </head> <body> <div class="arrow"></div> </body> </html>
效果如下：
接下來，我分享一種按鈕的做法
主要是利用邊框樣式、盒子陰影和偽類效果來實現的
源代碼：
<!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; /*設置外陰影*/ } .btn:active{ background:#bbb; box-shadow:5px 5px 10px #000 inset; /*設置內陰影*/ } .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>
效果：
開始
效果可能不太美觀，有待提升，大家可以發揮自己的想象做出更好的效果，祝大家學習愉快！
