溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

CSS制作的三角形和圓形小按鈕代碼分享

發(fā)布時間：2021-08-10 21:05:53 來源：億速云 閱讀：147 作者：chen 欄目：web開發(fā)

這篇文章主要介紹“CSS制作的三角形和圓形小按鈕代碼分享”，在日常操作中，相信很多人在CSS制作的三角形和圓形小按鈕代碼分享問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS制作的三角形和圓形小按鈕代碼分享”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

參考了天貓、微博等網(wǎng)站的做法，用純html和css實現(xiàn)，效果還是不錯的。
以下是成果，兼容主流瀏覽器，包括ie6。
CSS制作的三角形和圓形小按鈕代碼分享

CSS Code復制內(nèi)容到剪貼板

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   

  2. <html xmlns="http://www.w3.org/1999/xhtml">   

  3.   

  4. <head>   

  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   

  6. <meta http-equiv="Content-Language" content="zh-CN" />   

  7. <meta name="Keywords" content="" />   

  8. <meta name="Description" content="" />   

  9. <title></title>   

  10. </head>   

  11. <style type="text/css">   

  12. *{margin:0; padding:0; list-style:none; font:normal 12px/150% 宋體; }   

  13. body{ padding:20px; }   

  14. .arrow{ margin-bottom:20px;  }   

  15.   

  16. /* css三角形 */  

  17. .arrow,.arrow s { position:relative;  display:block; font-size: 0; line-            height: 0; width: 0; height: 0; border-color:transparent; border-style:dashed; border-width:5px; }   

  18. .arrowR,.arrowR s{ border-left-color:#aaa; border-left-style:solid; }   

  19. .arrowR s{ border-left-color:#fff; position:absolute; left:-7px; top:-5px; }   

  20. .arrowR:hover{ border-left-color:#f60;  }   

  21.   

  22. .arrowL,.arrowL s{ border-right-color:#aaa; border-right-style:solid; }   

  23. .arrowL s{ border-right-color:#fff; position:absolute; rightright:-7px; top:-5px; }   

  24. .arrowL:hover{ border-right-color:#f60;  }   

  25.   

  26. .arrowT,.arrowT s{ border-bottom-color:#aaa; border-bottom-style:solid; }   

  27. .arrowT s{ border-bottom-color:#fff; position:absolute; left:-5px; top:-3px; }   

  28. .arrowT:hover{ border-bottom-color:#f60;  }   

  29.   

  30. .arrowB,.arrowB s{ border-top-color:#aaa; border-top-style:solid; }   

  31. .arrowB s{ border-top-color:#fff; position:absolute; left:-5px; bottombottom:-3px; }   

  32. .arrowB:hover{ border-top-color:#f60;  }   

  33.   

  34. /* css圓形 */  

  35. .circle{ line-height:100%; overflow:hidden;  font-    family:Tahoma,Helvetica; font-size:18px; color:#aaa;  }   

  36. .circle:hover{ color:#f60;  }   

  37.   

  38.   

  39. /* 提示盒子 */  

  40. .tipBox{ width:200px; margin-top:10px;   }   

  41. .tipBox .hd{ height:5px;  position:relative;  }   

  42. .tipBox .hd .arrow{ position:absolute; top:-5px; left:10px; }   

  43. .tipBox .hd .arrow s{ top:-4px; }   

  44. .tipBox .bd{ border:1px solid #aaa; padding:10px;  -webkit-border-    radius:5px; -moz-border-radius:5px; border-radius:5px;  }   

  45. .tipBoxA .arrow s{ border-bottom-color:#f6f6f6;  }   

  46. .tipBoxA .bd{ background:#f6f6f6;  }   

  47. </style>   

  48. <body>   

  49. <a class="arrow arrowR"></a>   

  50. <a class="arrow arrowL"></a>   

  51. <a class="arrow arrowT"></a>   

  52. <a class="arrow arrowB"></a>   

  53.   

  54. <a class="arrow arrowR"><s></s></a>   

  55. <a class="arrow arrowL"><s></s></a>   

  56. <a class="arrow arrowT"><s></s></a>   

  57. <a class="arrow arrowB"><s></s></a>   

  58.   

  59. <a class="circle">?</a>   

  60.   

  61. <div class="tipBox">   

  62. <div class="hd">   

  63. <s class="arrow arrowT"><s></s></s>   

  64. </div>   

  65. <div class="bd">   

  66. 用css做的提示盒子，上三角是純css，盒子圓角用到css3   

  67. </div>   

  68. </div>   

  69. <div class="tipBox tipBoxA">   

  70. <div class="hd">   

  71. <s class="arrow arrowT"><s></s></s>   

  72. </div>   

  73. <div class="bd">   

  74. 用css做的提示盒子，上三角是純css，盒子圓角用到css3   

  75. </div>   

  76. </div>   

  77. </body>   

  78.   

  79. </html>  

到此，關于“CSS制作的三角形和圓形小按鈕代碼分享”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

向AI問一下細節(jié)

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手