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

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-16
個人求職簡曆上的自我評價範文
個人求職簡曆上的自我評價範文
個人簡曆中自我評價範文本人誠實守信,工作嚴謹踏實,認真負責,處事機靈。擁有積極向上的生活态度和廣泛的興趣愛好,具有良好的心理素質和吃苦耐勞精神,對事有自己的見解,并有較強的共事協作能力。我有着年輕人特有的朝氣和魄力,富有開創事業的頭腦和激情...
2026-03-16
最強匠心技能大賽
最強匠心技能大賽
浙江新聞客戶端記者滕一韬通訊員湯嘉旸王凱凱11月17日,由浙江省援疆指揮部、阿克蘇地區教育局、一師阿拉爾市教育局共同主辦的2021年第五屆“浙阿匠心杯”阿克蘇地區暨兵團第一師職業院校師生技能大賽圓滿結束。本屆大賽分高職、中職兩組進行,設置紅...
2026-03-16
立體聲原理
立體聲原理
立體聲原理?立體聲源于雙聲道的原理,立體聲音響給人們帶來聲音美的享受,這是單聲道音響無法比拟的立體聲技術發展如此快并被人們認可是它給聽音人以臨場感、真實感,其主要原因是兩隻揚聲器輻射的聲音塑造了聲源方位,即立體聲,我來為大家科普一下關于立體...
2026-03-16
數學分析定理體系
數學分析定理體系
在大多數科學領域,一代人總是摧毀上一代人所構建的東西,一代人所确立的東西總是被下一代人所毀滅。隻有在數學領域,每代人都是在老建築之上構建新樓層。分析學,無窮過程的研究,曾經被牛頓和萊布尼茨理解為涉及到連續量,比如長度、面積、速度和加速度,而...
2026-03-16
Copyright 2023-2026 - www.tftnews.com All Rights Reserved