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

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-09
服裝導購pk賽
服裝導購pk賽
何女士反映,前段時間,她和孩子在杭州逛商場的時候,有人請孩子去參加走秀選拔。她帶着孩子去面試,結果花了近三萬塊錢,報了培訓班。何女士:“我們在商場逛街的時候,有一個人自稱設計師,看中我女兒,讓我們來參加一個高定秀的選拔。(記者:高定秀是什麼...
2026-03-09
空姐月工資能掙多少
空姐月工資能掙多少
說到空姐工資饞涎欲滴,一個月好幾萬的工資。看到他們工資條那一刻你就明白了他們的工資。這工資不太追求奢侈,安安穩穩的過得日子這份工資還是可以滿足生活的大部分的。然而你認為光鮮靓麗的職業背後,空姐月薪三、四萬隻是副業,更多的收入靠打賞,一個靠臉...
2026-03-09
職業年金哪些人能領到
職業年金哪些人能領到
職業年金隻能領取139個月嗎?在2014年10月,機關事業單位的養老保險制度改革,改革之後,機關事業單位的在崗職工也需要繳納養老保險了,除了養老保險之外,機關事業單位也為在崗職工建立了職業年金。簡單來說,職業年金是一種補充性的養老保險制度,...
2026-03-09
明銳空調壓力傳感器電壓多少正常
明銳空調壓力傳感器電壓多少正常
嚴重聲明:本案例系技師幫幫友超哥原創,未經允許,不得轉載,否則必究!一輛2015款全新明銳1.4TSI雙離合,搭載CSS發動機,行駛裡程12430公裡,空調壓縮機不工作,故障數據顯示高壓傳感器沒有信号。診斷思路該故障是因為高壓傳感器信号故障...
2026-03-09
Copyright 2023-2026 - www.tftnews.com All Rights Reserved