首页
/
每日頭條
/
職場
/
css動态計算百分比
css動态計算百分比
更新时间:2026-03-19 10:47:45

css動态計算百分比(用CSS畫一個等邊三角形)1

css是前端面試必考的内容,有時候會面試官會出題讓你畫一些基本圖形。因為畫圖的過程中能考察很多的CSS知識點。今天我們就和大家介紹一個比較難得等邊三角形。

思路是利用三個div的邊框來拼成一個三角形,隻需要調整好左右兩個div邊框的旋轉角度,就能生成一個等邊三角形。可以使用三個div來實現,也可以借助僞類來實現三個div的效果。代碼如下:

// css.box{ border-bottom:1px solid #030303; width:100px; height:100px; margin: 0 auto; box-sizing: border-box; position: relative; } .box:before,.box:after{ content:""; display: block; width:100px; height:100px; box-sizing: border-box; position: absolute; } .box:before{ border-left:1px solid #030303; transform-origin: left bottom; transform: rotate(30deg); } .box:after{ border-bottom:1px solid #030303; transform: rotate(60deg); transform-origin: right bottom; }//html<div class="box"></div>

css動态計算百分比(用CSS畫一個等邊三角形)2

等邊三角形

,
Comments
Welcome to tft每日頭條 comments! Please keep conversations courteous and on-topic. To fosterproductive and respectful conversations, you may see comments from our Community Managers.
Sign up to post
Sort by
Show More Comments
推荐阅读
實施精細化管理的舉措
實施精細化管理的舉措
實施精細化管理的舉措?精細化管理,是以科學管理為基礎,以精和細作為特征,強調遵循事物發展規律,以最優化的手段和方法去達到最理想的結果,其核心思想是精、準、細、嚴,今天小編就來說說關于實施精細化管理的舉措?下面更多詳細答案一起來看看吧!實施精...
2026-03-19
職業學校可以學幾個專業
職業學校可以學幾個專業
我國的經濟主要是靠實體經濟作支撐的,這就需要大量專業技術人才,需要大批大國工匠。職業教育前景廣闊、大有可為。初中畢業上職校是很好的選擇,都有哪些專業适合初中生學習?小編根據各大人才網站招聘、各學校就業學生情況等因素,盤點下近幾年就業前景比較...
2026-03-19
超低排放管控
超低排放管控
2022年1月24日,國務院發布關于印發《“十四五”節能減排綜合工作方案》的通知,鼓勵将高爐—轉爐長流程煉鋼轉型為電爐短流程煉鋼,預計到2025年完成5.3億噸鋼鐵産能超低排放改造,大氣污染防治重點區域燃煤鍋爐全面實現超低排放。預計到202...
2026-03-19
網紅頭盔材料來了
網紅頭盔材料來了
為幫助大家養成良好的安全習慣,去年,有關部門在全國開展“一盔一帶”安全守護行動。現在大家都有了騎電動車戴頭盔的意識,可是大家戴的頭盔能守護我們的安全嗎?這兩天,一則“電動車乘員頭盔不符合率高達75%”的消息獲得廣泛關注。江蘇省市場監督管理局...
2026-03-19
學電氣自動化能進國家電網嗎
學電氣自動化能進國家電網嗎
如果高考想學電氣自動化的話。成績優異,有理想有抱負。已經考上大學并且在電氣自動化專業,那麼恭喜你。在大學的四年中你會經曆你想不到的愉快經曆。在其他專業随心所欲去玩的時候,你可能在看各種電氣圖。在其他專業周六日的時候,你可能在繼續上課。在其他...
2026-03-19
Copyright 2023-2026 - www.tftnews.com All Rights Reserved