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

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
推荐阅读
eja壓力變送器原理圖解
eja壓力變送器原理圖解
1、請用框圖說明EJA智能變送器的工作原理。答EJA智能變送器的原理框圖如圖2-26所圖示。它由膜盒組件和智能轉換部件組成。圖2-26在膜盒組件中,矽諧振式傳感器上的兩個H形諧振粱分别将差壓(壓力)信号轉換成頻率信号,然後用頻率差分技術将兩...
2026-03-07
關于脫單的群管理
關于脫單的群管理
一、正常的交易流程是怎樣的?回答:1、客戶來了解産品2、上門量尺——拿出方案——客戶看方案3、調整方案——再看方案——成交二、什麼樣的情況可以逼單?回答:如果客戶意向大(可能是第一次上門,看感覺)三、如何給客戶報價?回答:拆單報價法:櫃子多...
2026-03-07
财務幾年沒做還能轉行嗎
财務幾年沒做還能轉行嗎
知識星球有個小夥伴提問:二丫姐你好呀,最近有個問題一直困擾我,想了解一下你的看法。交待一下我的背景:2017年護理大專生畢業,有證,但是畢業後沒有從事任何行業相關的工作,當時在東莞工廠比較多,陰差陽錯轉行做了财務。考了入門的初級證,但是目前...
2026-03-07
任泉工作室簽約藝人
任泉工作室簽約藝人
關于新老交替,這本來是一種自然規律,但是總有種莫名的失落和傷感,所以才有了“由來隻有新人笑,有誰聽到舊人哭”,以及“長江後浪推前浪,前浪死在沙灘上”,“青出于藍而勝于藍”等等說法。當然新老交替,也不必那麼悲傷,而且也沒那麼迫切了。比如娛樂圈...
2026-03-07
領導提拔前四個征兆
領導提拔前四個征兆
職場如江湖,是江湖就有風吹草動。不管是體制内還是體制外,人事變動都屬于秘密。領導要擡舉你有多種方式,傳遞的信息量各有不同,如果領導把你當作自己人,那麼,恭喜你離晉升不遠了。如果領導對你出現這10種迹象,符合3條,你就可能在不久得到提拔重用,...
2026-03-07
Copyright 2023-2026 - www.tftnews.com All Rights Reserved