首页
/
每日頭條
/
職場
/
css動态計算百分比
css動态計算百分比
更新时间:2026-02-26 19:55:43

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-02-26
電信機頂盒标準模式怎麼設置
電信機頂盒标準模式怎麼設置
機頂盒是我們收看電視節目的必備品呀,相信大家都見過機頂盒,但大部分小夥伴應該都沒有拆過機頂盒,機頂盒的結構是怎麼樣的呢?在此結構的基礎之上,它又是如何在運作的呢?一、機頂盒工作原理--簡介機頂盒,學名為數字視頻變換盒,英文名稱為SetTop...
2026-02-26
實體店碰到職業打假人敲詐怎麼辦
實體店碰到職業打假人敲詐怎麼辦
實體店碰到職業打假人敲詐怎麼辦?原标題:或收貨後申請退款不退貨或要挾商家獲取高價賠償職業打假灰色産業鍊調查,下面我們就來說一說關于實體店碰到職業打假人敲詐怎麼辦?我們一起去了解并探讨一下這個問題吧!實體店碰到職業打假人敲詐怎麼辦原标題:或收...
2026-02-26
63年出生明年退休工資
63年出生明年退休工資
1963年出生的,到2023年剛好是60歲辦理退休,60歲辦理退休的人員中包含了兩部分群體,一是男性職工或是幹部;二是在機關事業單位中擔任副縣處級領導職務的女幹部,或是擔任副高級以上專業技術職務的女性技術人員。按照這個題目的意思,實際上就是...
2026-02-26
設計院為什麼工資這麼高
設計院為什麼工資這麼高
網上看了很多文章,大多吐槽設計院工作的,各種不好,各種加班錢少事多,但是,在設計院工作就沒有一點點優點嗎?當前綜甲院之人員結構:組織機構:設計部:配置1200人;EPC項目部:配置約250人;職能管理及輔助部:配置約550人。總人數約200...
2026-02-26
Copyright 2023-2026 - www.tftnews.com All Rights Reserved