首页
/
每日頭條
/
職場
/
css動态計算百分比
css動态計算百分比
更新时间:2026-03-07 14:29:58

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
推荐阅读
女上司經常發語音怎麼回事(同事連發5條60秒語音)
女上司經常發語音怎麼回事(同事連發5條60秒語音)
  最近幾天大家都開始了在家辦公模式,每天睡到八點起床工作,也不用上下班通勤,倒也有滋有味。   但是朋友小李卻和我抱怨,在家辦公真的是太難了。   小李是個部門主管,每天早上定好了九點微信開會,不是這個沒到就是那個沒到。不僅如此,他還會在已經上床休息的時候收到員工發來的工作報告,有個同事連發5條60秒語音,搞得他在休息時間還要處理問題,真的是令人頭大。  ...
2026-03-07
yy阿哲跟雨軒為啥鬧掰(阿哲态度堅決不諒解雨軒)
yy阿哲跟雨軒為啥鬧掰(阿哲态度堅決不諒解雨軒)
  IR主播雨軒曾經和當紅主播阿哲關系特别好,形同兄弟。但後來兩人因為一些原因決裂,最後因為雨軒在直播間有涉及阿哲的違規言論,被阿哲舉報凍結了直播權限一年。      舍得最開始玩玩YY的時候是支持阿哲的土豪,給阿哲刷了不少禮物,和阿哲的關系一直特别好。因為在直播間涉及IR公會的違規言論連續被IR公會舉報,将被凍結直播間一年,但後來事情有了轉機,IR公會希望...
2026-03-07
理想之城蘇筱入職是哪一集(理想之城蘇筱被開除)
理想之城蘇筱入職是哪一集(理想之城蘇筱被開除)
  由孫俪,趙又廷主演的電視劇《理想之城》已經播出過半。   整部劇看下來,最大的感受就是真實。      女主每天灰頭土臉的狀态真實,職場上每個人都有自己的小算盤真實。   當然,最真實的還是劇中出現的各種“靠關系”。   瑪利亞因為嫁了個好丈夫,就能在集團呼風喚雨。   汪炀因為财務大姐的老公是個小官,就對她盡力忍耐。   甚至劉鐵生隻因看了一眼黃禮林和...
2026-03-07
天刀手遊裡哪個職業平民玩家首選(天刀手遊這幾個職業不要碰)
天刀手遊裡哪個職業平民玩家首選(天刀手遊這幾個職業不要碰)
  備受期待的天刀手遊,眼看着就要正式全平台上線了。許多玩家已經預約很久,呼朋喚友等待一起進入遊戲了。作為騰訊這幾年手遊最大牌的遊戲,經曆多輪測試,幾次跳票,終于即将和所有玩家見面。   許多新人玩家前期并沒有參加測試,對職業的選擇大多憑借喜好。但作為一款道具收費遊戲,并擁有一定的操作性,一些看似強力的職業,絕對不是你進遊戲的第一選擇。      那麼作為一...
2026-03-07
excel工作簿默認有幾張工作表(更改Excel2007工作簿中默認的工作表張數)
excel工作簿默認有幾張工作表(更改Excel2007工作簿中默認的工作表張數)
  新建一個工作簿後,該工作簿中包含有三張空白工作表,分别為Sheet1、Sheet2、Sheet3。Excel 2007工作表标簽效果如圖1所示。      新建工作簿   圖1   用戶可以更改Excel2007工作簿中默認的工作表張數,操作步驟如下:   步驟1單擊“Office”按鈕,在顯示的菜單中單擊“Excel選項”按鈕,打開“Excel選項”對...
2026-03-07
Copyright 2023-2026 - www.tftnews.com All Rights Reserved