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

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-10
工資表自動核算公式
工資表自動核算公式
使用人數:5人行業:淘寶設計公司應用場景:薪酬自動核算、好評系統、儀表盤成都藝天創意廣告公司(以下簡稱藝天創意)是一家專業做設計、攝影、視頻拍攝、配音、後期剪輯于一體的綜合型電商設計服務公司。與線下實體廣告公司不同的是,藝天創意主要承接的電...
2026-03-10
小米掃地機器人激光測距儀
小米掃地機器人激光測距儀
前言長度的測量是我們日常生活中經常碰到的,就如我們買房要測量層高,牆與牆直接的面積;裝修要測量家具長短是否達到自己的标準。但是我們現在用的尺子各有不同,攜帶不方面;有時候會因為自己的原因造成測量上的失誤。有沒有什麼工具可以解決這個問題呢?購...
2026-03-10
蘋果手機怎麼在日曆做上班标記
蘋果手機怎麼在日曆做上班标記
蘋果手機上有很多比較好用的app軟件,它自帶的日曆app就是其中的一種。為了方便自己的時間規劃,很多人都想要在日曆上看到休假和上班的日子,那麼蘋果手機自帶日曆怎麼顯示休假上班呢?在使用蘋果手機日曆的時候,周六周日和周一至周五工作日的日期是有...
2026-03-10
考研報名學碩和專碩是怎麼區分的
考研報名學碩和專碩是怎麼區分的
現如今,随着大學生就業競争力的增大,越來越多的大學生選擇畢業後加入考研大軍,繼續深造,以提高學曆、增強個人競争力,為未來的工作發展打下堅實的基礎。但考研并不是一件易事,除了要能耐得住學習的寂寞,還要面對激烈的競争。據相關數據統計顯示,202...
2026-03-10
Copyright 2023-2026 - www.tftnews.com All Rights Reserved