首页
/
每日頭條
/
職場
/
css動态計算百分比
css動态計算百分比
更新时间:2026-09-03 03:13:34

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
推荐阅读
報關有哪些流程
報關有哪些流程
前期階段:1,整理報關資料。部分客戶能提供完整的報關資料,我們首先就是對報關資料進行審查,首先看是否齊全,具體包括以下内容;A.報關委托書:每票1份(簽字蓋章)B.報檢委托書:每票1份(簽字蓋章)C.中文合同:每票2份(有中俄雙方章)D.出...
2026-09-03
龍之谷手遊各職業轉職名稱
龍之谷手遊各職業轉職名稱
龍之谷手遊中目前的話一轉職業是有10個職業的,二轉是有20個的,但是二轉的職業屬性和一轉的是沒有區别的,公會技能也是一種加點,今天就幫大家分析下各職業的公會技能加點,一起來看看技巧吧。龍之谷手遊五月底更新新職業刺客、s精靈極限傑蘭特,提前下...
2026-09-03
街道辦事處是做什麼的
街道辦事處是做什麼的
街道辦事處是做什麼的?負責居民區、街巷胡同的環境衛生和綠化美化的管理工作,組織單位和居民開展愛國衛生運動,落實“門前三包”責任制;組織和監督對違法建築、違法占用道路、無照經營以及違反市容環境衛生、綠化管理規定行為的查處工作,下面我們就來聊聊...
2026-09-03
街道統戰工作全面提升
街道統戰工作全面提升
街道統戰工作全面提升?中國江蘇網12月30日無錫訊2019年,江溪街道與時俱進、勇于創新、真抓實幹,體現時代性、把握規律性、富于創造性,以“五個新”做好統戰工作,我來為大家科普一下關于街道統戰工作全面提升?下面希望有你要的答案,我們一起來看...
2026-09-03
開店創業失敗經曆
開店創業失敗經曆
曾于裡這已經是身邊的朋友第四例開店失敗了。其中一例是三人合夥開民宿,投入超過100萬元,結果剛開業遭遇2020年的疫情,損失慘重;其他三例開的是飲品店,兩家店是賣奶茶,一家店是賣燒仙草。持續最長的奶茶店開了三年,算下來勉強收支平衡,等于朋友...
2026-09-03
Copyright 2023-2026 - www.tftnews.com All Rights Reserved