網易首頁的頭部功能表列中，也會有這樣的三角形
當滑鼠經過時，三角形會垂直翻轉，如下
現在我分享製作三角形的做法，主要是利用邊框做成的
首先，四個三角形合并在一起的正方形，也就是正方形的四條邊框形成的四個三角形
原始碼：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正方形</title> <style> .p{ 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> <p class="p"></p></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> <p class="arrow"></p></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 p{ font-size:30px; font-family:"微軟雅黑"; color:blue; float:left; margin-top:28px; margin-left:20px; } </style></head><body> <p class="btn"> <a href="###"> <p>開始</p> </a> </p></body></html>
效果：
效果可能不太美觀，有待提升，大家可以發揮自己的想象做出更好的效果，祝大家學習愉快！
以上這篇用CSS製作三角形和按鈕的簡單一實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援topic.alibabacloud.com。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
