首页
/
每日頭條
/
職場
/
css動态計算百分比
css動态計算百分比
更新时间:2026-04-11 01:40:09

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
推荐阅读
官方通報朋友圈羨慕按時發工資
官方通報朋友圈羨慕按時發工資
近日,有網友爆料稱,自己發朋友圈“羨慕人家工資按時發放”,同事評論“我也羨慕”,竟被一起開除,引發熱議。據睢縣人民政府網站消息,河南睢縣人力資源和社會保障局22日發布通報稱,4月21日,針對網上反映“睢縣康夢園醫養保健服務有限公司(原康甯醫...
2026-04-11
銷售經理績效考核辦法
銷售經理績效考核辦法
關注【本頭條号】更多關于制度、流程、體系、崗位、模闆、方案、工具、案例、故事、圖書、文案、報告、技能、職場等内容,弗布克15年積累免費與您分享!閱讀導航→01銷售經理崗位考核方案02區域經理崗位考核方案一、銷售經理崗位考核方案銷售經理崗位考...
2026-04-11
物業行業職業價值
物業行業職業價值
疫情之下除公務員以外最穩定的行業,沒有之一;這兩天刷短視頻,有沒有刷到關于物業對比主題的視頻呢?疫情之下,你家物業還好嗎?未來你的房子增值幅度的大小可能就取決你家小區物業。物業管理行業起源其實很晚,從1981年從香港引入到現在也不過三十餘年...
2026-04-11
秦皇島市高職院校一覽表
秦皇島市高職院校一覽表
河北對外經貿職業學院雄居校友會2022秦皇島市高職院校排名第一河北建材職業技術學院跻身前3名2022校友會中國大學排名評價指标體系,
2026-04-11
對自己未來的平面設計規劃
對自己未來的平面設計規劃
行業新人不斷崛起,靈感、創意越來越少······作為平面設計的你,如何穩立潮頭?讓我們用真實的行業數據,為你點亮乘風破浪的明燈!(幹貨長文,終身受用!記得轉發和收藏哦。)————————————本文重點内容如下:1、職業現狀及薪資水平2、多...
2026-04-11
Copyright 2023-2026 - www.tftnews.com All Rights Reserved