首页
/
每日頭條
/
職場
/
css動态計算百分比
css動态計算百分比
更新时间:2026-05-31 13:50:58

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.因為事業發展的原因,辭去現有的工作,幾多不舍……,我來為大家科普一下關于辭職信怎麼寫最合适簡短一點的?下面希望有你要的答案,我們一起來看看吧!辭職信怎麼寫最合适簡短一點的提示1.因為事業發展的原因,辭去...
2026-05-31
向下自動填充快捷鍵
向下自動填充快捷鍵
在我們的工作中,适當的使用快捷鍵,能提高我們的工作效率。鍵與一些鍵的組合,可以實現批量填充功能,一起來看看有哪些吧!1、批量填充相同内容選中要填充内容的單元格區域輸入内容(如:愛知趣)按鍵2、批量向下填充内容選中要填充數據的單元格區域按鍵:...
2026-05-31
期待新職業技能标準釋放
期待新職業技能标準釋放
記者10日從人力資源和社會保障部獲悉,2020年“12333”全國統一咨詢日活動周将于7月15日“世界青年技能日”啟動,以“職業技能提升改變你的生活”為主題,圍繞職業技能提升行動開展政策宣傳和咨詢活動。活動持續一周,到7月21日結束。活動周...
2026-05-31
廣東碧桂園職業學院畢業典禮
廣東碧桂園職業學院畢業典禮
在6月25日廣東碧桂園職業學院2022屆畢業典禮上,碧桂園職業學院執行院長徐舒揚為畢業生作寄語,黨委書記兼督導專員莫喬鋒宣讀《關于準予2022屆524名學生畢業的決定》、《關于表彰2022屆優秀畢業生、優秀畢業生标兵和優秀畢業生幹部的決定》...
2026-05-31
python簡單編程面試
python簡單編程面試
點擊上方頭像關注我,每周上午09:00準時推送,每月不定期贈送技術書籍,小窗口回複“資源”、“測試工具包”領取測試資源。本文6617字,閱讀約需17分鐘在面試自動化測試、測試開發等職位時,經常會問到Python高階編程相關的問題,以下就介紹...
2026-05-31
Copyright 2023-2026 - www.tftnews.com All Rights Reserved