经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
html+css实现分层金字塔的实例_HTML/Xhtml
来源:jb51  时间:2021/6/7 9:23:20  对本文有异议

本文主要介绍了html+css实现分层金字塔的实例,分享给大家,具体如下:

先上效果再看代码

直接上代码

  1. // html
  2. <div class="finetriangle">
  3. <div class="sanjiao">
  4. <!-- 金字塔 -->
  5. <div class="sj sj1"></div>
  6. <div class="sj sj2"></div>
  7. <div class="sj sj3"></div>
  8. <div class="sj sj4"></div>
  9. <div class="sj sj5"></div>
  10. <!-- 右侧数据填入 -->
  11. <div class="comarow descsj1">
  12. <span class="line"></span>
  13. <span class="value" id="hgwvalue">0</span>
  14. </div>
  15. <div class="comarow descsj2">
  16. <span class="line"></span>
  17. <span class="value" id="gwvalue">0</span>
  18. </div>
  19. <div class="comarow descsj3">
  20. <span class="line"></span>
  21. <span class="value" id="zgwvalue">0</span>
  22. </div>
  23. <div class="comarow descsj4">
  24. <span class="line"></span>
  25. <span class="value" id="zwvalue">0</span>
  26. </div>
  27. <div class="comarow descsj5">
  28. <span class="line"></span>
  29. <span class="value" id="dwvalue">0</span>
  30. </div>
  31. <!-- 中间文字 -->
  32. <div class="describe describe1">很高危</div>
  33. <div class="describe describe2">高&nbsp;&nbsp;&nbsp;&nbsp;危</div>
  34. <div class="describe describe3">中高危</div>
  35. <div class="describe describe4">中&nbsp;&nbsp;&nbsp;&nbsp;危</div>
  36. <div class="describe describe5">低&nbsp;&nbsp;&nbsp;&nbsp;危</div>
  37. </div>
  38. </div>
  39.  
  40. // css
  41. <style>
  42. body {
  43. width: 100%;
  44. height: 100%;
  45. }
  46. .finetriangle {
  47. width: 300px;
  48. height: 200px;
  49. background: #082449;
  50. }
  51.  
  52. .finetriangle .sanjiao {
  53. width: 308px;
  54. margin: 0 auto;
  55. position: relative;
  56. transform: translateY(-50%);
  57. -webkit-transform: translateY(-50%);
  58. top: 46%;
  59. padding-right: 30px;
  60. }
  61.  
  62. .finetriangle .sj {
  63. margin: 0 auto;
  64. height: 0;
  65. border-top: 0 solid transparent;
  66. border-right: 15px solid transparent;
  67. border-left: 15px solid transparent;
  68. border-bottom-width: 30px;
  69. border-bottom-style: solid;
  70. box-sizing: content-box;
  71. margin-bottom: 9px;
  72. }
  73.  
  74. .finetriangle .sj1 {
  75. width: 0;
  76. border-bottom-color: #ff0086;
  77. box-shadow: 0 10px 0 0 #cc007e;
  78. }
  79.  
  80. .finetriangle .sj2 {
  81. width: 40px;
  82. border-bottom-color: #ff3600;
  83. box-shadow: 0 10px 0 0 #ce1d00;
  84. }
  85.  
  86. .finetriangle .sj3 {
  87. width: 80px;
  88. border-bottom-color: #ff7f00;
  89. box-shadow: 0 10px 0 0 #d16800;
  90. }
  91.  
  92. .finetriangle .sj4 {
  93. width: 120px;
  94. border-bottom-color: #ffc94d;
  95. box-shadow: 0 10px 0 0 #e5912e;
  96. }
  97.  
  98. .finetriangle .sj5 {
  99. width: 160px;
  100. border-bottom-color: #67ce67;
  101. box-shadow: 0 10px 0 0 #499c49;
  102. }
  103.  
  104. .finetriangle .comarow {
  105. font-size: 12px;
  106. position: absolute;
  107. }
  108.  
  109. .finetriangle .line {
  110. display: inline-block;
  111. height: 1px;
  112. margin-bottom: 5px;
  113. }
  114.  
  115. .finetriangle .value {
  116. font-size: 16px;
  117. }
  118.  
  119. .finetriangle .descsj1 {
  120. top: 5px;
  121. margin-left: 146px;
  122. color: #ff0086;
  123. }
  124.  
  125. .finetriangle .descsj1 .line {
  126. width: 100px;
  127. background: #ff0086;
  128. }
  129.  
  130. .finetriangle .descsj2 {
  131. top: 41px;
  132. margin-left: 166px;
  133. color: #ff3600;
  134. }
  135.  
  136. .finetriangle .descsj2 .line {
  137. width: 80px;
  138. background: #ff3600;
  139. }
  140.  
  141. .finetriangle .descsj3 {
  142. top: 81px;
  143. margin-left: 186px;
  144. color: #ff7f00;
  145. }
  146.  
  147. .finetriangle .descsj3 .line {
  148. width: 60px;
  149. background: #ff7f00;
  150. }
  151.  
  152. .finetriangle .descsj4 {
  153. top: 119px;
  154. margin-left: 206px;
  155. color: #ffc94d;
  156. }
  157.  
  158. .finetriangle .descsj4 .line {
  159. width: 40px;
  160. background: #ffc94d;
  161. }
  162.  
  163. .finetriangle .descsj5 {
  164. top: 159px;
  165. margin-left: 226px;
  166. color: #67ce67;
  167. }
  168.  
  169. .finetriangle .descsj5 .line {
  170. width: 20px;
  171. background: #67ce67;
  172. }
  173.  
  174. .finetriangle .describe {
  175. position: absolute;
  176. margin-left: 135px;
  177. font-size: 12px;
  178. color: #ffffff;
  179. }
  180.  
  181. .finetriangle .describe1 {
  182. top: 10px;
  183. }
  184.  
  185. .finetriangle .describe2 {
  186. top: 46px;
  187. }
  188.  
  189. .finetriangle .describe3 {
  190. top: 86px;
  191. }
  192.  
  193. .finetriangle .describe4 {
  194. top: 124px;
  195. }
  196.  
  197. .finetriangle .describe5 {
  198. top: 163px;
  199. }
  200. </style>

到此这篇关于html+css实现分层金字塔的实例的文章就介绍到这了,更多相关html分层金字塔内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue! 

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号