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

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
推荐阅读
機關事業單位基本工資标準2022
機關事業單位基本工資标準2022
事業單位工勤崗位人員一般分為普通工和技術工,普通工相對數量較少,大部分都是技術工。技術工人一般分為五個等級,從技術工一級到技術工五級,從高到低分别對應高級技師、技師、高級工、中級工、初級工,所以高級工也就是技術工三級。工勤人員的工資由基本工...
2026-03-14
員工轉正自我鑒定四篇
員工轉正自我鑒定四篇
篇一:員工轉正自我評價範文精選經過一個多月的試用期,自己努力了,也進步了不少,學到了很多以前沒有的東西,我想這不僅是工作,更重要的是給了我一個學習和鍛煉的機會。在各部門的幫助和支持下,我做好統籌及上傳下達工作,把工作想在前,做在前,無論是工...
2026-03-14
長途汽車站正常運營了嗎
長途汽車站正常運營了嗎
長途汽車站正常運營了嗎?以前跑長途客運,是一門很賺錢的生意,特别是在十幾二十年前,記憶當中,每次坐長途車,車上都是座無虛席的盛況;甚至連車内中間的通道也擠滿了人,我來為大家科普一下關于長途汽車站正常運營了嗎?下面希望有你要的答案,我們一起來...
2026-03-14
打工人職場生活技巧
打工人職場生活技巧
#頭條創作挑戰賽#打工人也好,話事人也好,每一位辛苦打拼的職場人,都不容易。各有各的不容易,各有各的辛苦。忙忙碌碌中,難得透一口氣的時候,少不了的一件事,常常就是吐槽。無論手上正在做的,是什麼工作;無論這個工作,是一帆風順,還是困難重重,都...
2026-03-14
嵌入式培訓該怎麼學
嵌入式培訓該怎麼學
前段時間有一個小夥伴找到我說自己參加嵌入式培訓後悔了,前後花了将近1萬多,還是貸款那種。據他描述後悔的原因是沒學到東西,學的都是比較淺層面的,那我的理解就是開發闆的水平。這樣還不如自己買個開發闆學習,成本最多也就幾百塊錢。但是,這個說不好是...
2026-03-14
Copyright 2023-2026 - www.tftnews.com All Rights Reserved