0514-86177077
9:00-17:00(工作日)
本文主要介紹了html+css實現(xiàn)分層金字塔的實例,分享給大家,具體如下:
先上效果再看代碼
直接上代碼
// html <div class="finetriangle"> <div class="sanjiao"> <!-- 金字塔 --> <div class="sj sj1"></div> <div class="sj sj2"></div> <div class="sj sj3"></div> <div class="sj sj4"></div> <div class="sj sj5"></div> <!-- 右側數(shù)據(jù)填入 --> <div class="comarow descsj1"> <span class="line"></span> <span class="value" id="hgwvalue">0</span> </div> <div class="comarow descsj2"> <span class="line"></span> <span class="value" id="gwvalue">0</span> </div> <div class="comarow descsj3"> <span class="line"></span> <span class="value" id="zgwvalue">0</span> </div> <div class="comarow descsj4"> <span class="line"></span> <span class="value" id="zwvalue">0</span> </div> <div class="comarow descsj5"> <span class="line"></span> <span class="value" id="dwvalue">0</span> </div> <!-- 中間文字 --> <div class="describe describe1">很高危</div> <div class="describe describe2">高 危</div> <div class="describe describe3">中高危</div> <div class="describe describe4">中 危</div> <div class="describe describe5">低 危</div> </div> </div> // css <style> body { width: 100%; height: 100%; } .finetriangle { width: 300px; height: 200px; background: #082449; } .finetriangle .sanjiao { width: 308px; margin: 0 auto; position: relative; transform: translateY(-50%); -webkit-transform: translateY(-50%); top: 46%; padding-right: 30px; } .finetriangle .sj { margin: 0 auto; height: 0; border-top: 0 solid transparent; border-right: 15px solid transparent; border-left: 15px solid transparent; border-bottom-width: 30px; border-bottom-style: solid; box-sizing: content-box; margin-bottom: 9px; } .finetriangle .sj1 { width: 0; border-bottom-color: #ff0086; box-shadow: 0 10px 0 0 #cc007e; } .finetriangle .sj2 { width: 40px; border-bottom-color: #ff3600; box-shadow: 0 10px 0 0 #ce1d00; } .finetriangle .sj3 { width: 80px; border-bottom-color: #ff7f00; box-shadow: 0 10px 0 0 #d16800; } .finetriangle .sj4 { width: 120px; border-bottom-color: #ffc94d; box-shadow: 0 10px 0 0 #e5912e; } .finetriangle .sj5 { width: 160px; border-bottom-color: #67ce67; box-shadow: 0 10px 0 0 #499c49; } .finetriangle .comarow { font-size: 12px; position: absolute; } .finetriangle .line { display: inline-block; height: 1px; margin-bottom: 5px; } .finetriangle .value { font-size: 16px; } .finetriangle .descsj1 { top: 5px; margin-left: 146px; color: #ff0086; } .finetriangle .descsj1 .line { width: 100px; background: #ff0086; } .finetriangle .descsj2 { top: 41px; margin-left: 166px; color: #ff3600; } .finetriangle .descsj2 .line { width: 80px; background: #ff3600; } .finetriangle .descsj3 { top: 81px; margin-left: 186px; color: #ff7f00; } .finetriangle .descsj3 .line { width: 60px; background: #ff7f00; } .finetriangle .descsj4 { top: 119px; margin-left: 206px; color: #ffc94d; } .finetriangle .descsj4 .line { width: 40px; background: #ffc94d; } .finetriangle .descsj5 { top: 159px; margin-left: 226px; color: #67ce67; } .finetriangle .descsj5 .line { width: 20px; background: #67ce67; } .finetriangle .describe { position: absolute; margin-left: 135px; font-size: 12px; color: #ffffff; } .finetriangle .describe1 { top: 10px; } .finetriangle .describe2 { top: 46px; } .finetriangle .describe3 { top: 86px; } .finetriangle .describe4 { top: 124px; } .finetriangle .describe5 { top: 163px; } </style>
到此這篇關于html+css實現(xiàn)分層金字塔的實例的文章就介紹到這了,更多相關html分層金字塔內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持腳本之家!
標簽:上海 內蒙古 吳忠 山南 清遠 廣安 陜西 保定
上一篇:html+css實現(xiàn)賽博朋克風格按鈕
下一篇:html+css實現(xiàn)文字折疊特效實例
Copyright ? 1999-2012 誠信 合法 規(guī)范的巨人網(wǎng)絡通訊始建于2005年
蘇ICP備15040257號-8