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

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-02
表達加班心情短語
表達加班心情短語
表達加班心情短語?一星期,總有那麼七天不想上班上班就是起得比雞早,睡得比狗晚,吃得比豬差,幹得比驢多,我來為大家講解一下關于表達加班心情短語?跟着小編一起來看一看吧!表達加班心情短語一星期,總有那麼七天不想上班。上班就是起得比雞早,睡得比狗...
2026-03-02
霍蘭德職業測試是不是不準啊
霍蘭德職業測試是不是不準啊
約翰·霍蘭德(JohnHolland)是美國約翰·霍普金斯大學心理學教授,美國著名的職業指導專家。他于1959年提出了具有廣泛社會影響的職業興趣理論。他認為人的人格類型、興趣與職業密切相關,興趣是人們活動的巨大動力。如果一個人從事具有職業興...
2026-03-02
補辦社保卡網上信息什麼時候更新
補辦社保卡網上信息什麼時候更新
六安新聞網訊“現在補辦一張社保卡,從填表到制卡最多隻需要10分鐘,市民再也不需要等上7個工作日才能拿到補辦的新卡。”11月20日,記者從市人社局了解到,市直社會保障卡推出補換卡即時制卡服務,市民遺失社保卡到窗口補辦立等可取,這項服務下一步将...
2026-03-02
工作自我介紹
工作自我介紹
工作自我介紹?範文一我是xx部門的新人XXX,很高興、也很榮幸能跟大家在XXX公司一起工作、學習我是XX大學計算機學院2016級畢業生,修的是信息安全專業學校裡面教的東西很多很雜,學到的東西也博而不專語言方面,掌握比較熟練的是C/C++,當...
2026-03-02
Copyright 2023-2026 - www.tftnews.com All Rights Reserved