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

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
推荐阅读
怎麼把内向的人變成社交達人
怎麼把内向的人變成社交達人
“AreYouOK”還記得這首紅遍網絡的魔性歌曲嗎?他出自小米創始人雷軍,因印度新品發布會上的中式英語而走紅。最近,更是在2022年新品發布會上妙語連珠,怒怼友商“你才PPT手機呢!”“生死看淡,不服就幹!。”在發布會上如此幽默、放得開的他...
2026-02-28
朋友圈工作勵志短句
朋友圈工作勵志短句
朋友圈工作勵志短句?你不勇敢,沒人替你堅強!自信的生命最美麗!,我來為大家科普一下關于朋友圈工作勵志短句?以下内容希望對你有幫助!朋友圈工作勵志短句你不勇敢,沒人替你堅強!自信的生命最美麗!學會寬容,要有一顆寬容的愛心!心有多大,舞台就有多...
2026-02-28
差速器都在哪起作用
差速器都在哪起作用
你知道差速器是什麼嗎?它的工作原理又是什麼呢!我們就來介紹一下吧。為什麼要用差速器?汽車在轉彎時,車輪做的是圓弧的運動,那麼外側車輪的轉速必然要高于内側車輪的轉速,存在一定的速度差,在驅動輪上會造成相互幹涉的現象。由于非驅動輪左右兩側的輪子...
2026-02-28
渭南煤礦安全生産督導
渭南煤礦安全生産督導
渭南煤礦安全生産督導?12月21日至23日,國家礦山安全監察局監察專員李大生一行到韓城市開展煤礦安全明查暗訪工作市委常委、常務副市長張景鋒,市應急管理局及各相關負責同志陪同檢查,下面我們就來聊聊關于渭南煤礦安全生産督導?接下來我們就一起去了...
2026-02-28
人社部國家職業資格考試年限
人社部國家職業資格考試年限
,
2026-02-28
Copyright 2023-2026 - www.tftnews.com All Rights Reserved