首页
/
每日頭條
/
職場
/
css動态計算百分比
css動态計算百分比
更新时间:2026-03-23 09:55:24

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、儀表;2、語言表達;3、音樂;4、美術;5、舞蹈。二、面試要求:(一)儀表:1、儀表端正大方,手指完好無損。2、行走步态無明顯跛行;脊柱無明顯側彎;無駝背。3、面部無畸形;無3×3平方厘米以上的疤、麻、血管瘤或白癫風、...
2026-03-23
基層法律服務所執業證在哪裡辦
基層法律服務所執業證在哪裡辦
齊魯網·閃電新聞12月26日訊有一位網友在《問政山東》網絡問政平台留言問:目前自己了解到山東省關于基層法律工作者執業資格證試行辦法規定2022年到期。請問2022年之後是不是重新制定辦法?目前,山東省報考條件及執業範圍是什麼?山東省司法廳留...
2026-03-23
作為職場新人應該注意的事項
作為職場新人應該注意的事項
作為職場新人應該注意的事項?作為一名職場新人,首先應該注意處理好同事之間的關系,初入職場新人工作經驗少,在工作中一開始發揮不了太多的價值,為了盡快熟悉工作内容和流程,同事的作用至關重要,所以先做人再做事至關重要,接下來我們就來聊聊關于作為職...
2026-03-23
國企開除什麼樣的員工
國企開除什麼樣的員工
國企開除什麼樣的員工?政策方面,國企有三大責任,政治責任、經濟責任和社會責任單說社會責任,其中有一項就是要為社會承擔就業任務,維護社會穩定國企把人辭退了,人就是社會上去了,就産生了不穩定因素這是違背國企“三大責任”的原則的前些年搞的下崗分流...
2026-03-23
工作格言大全勵志短句
工作格言大全勵志短句
工作格言大全勵志短句?古之立大事者,不惟有超世之才,亦必有堅忍不拔之志,下面我們就來聊聊關于工作格言大全勵志短句?接下來我們就一起去了解一下吧!工作格言大全勵志短句古之立大事者,不惟有超世之才,亦必有堅忍不拔之志。誰能以深刻的内容充實每個瞬...
2026-03-23
Copyright 2023-2026 - www.tftnews.com All Rights Reserved