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

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
推荐阅读
男子順路帶同事出車禍賠償90萬
男子順路帶同事出車禍賠償90萬
男子順路帶同事出車禍賠償90萬?來源:潇湘晨報來源|海峽導報、廈門市海滄區人民法院,今天小編就來說說關于男子順路帶同事出車禍賠償90萬?下面更多詳細答案一起來看看吧!男子順路帶同事出車禍賠償90萬來源:潇湘晨報來源|海峽導報、廈門市海滄區人...
2026-03-03
培訓機構老師崗位職責說明書
培訓機構老師崗位職責說明書
培訓機構老師崗位職責說明書?不同的教育機構對教務工作的設置也是不一樣的,有的機構教務隻需要負責後期的維護工作,例如:排課、考勤、與學生以及老師溝通、回訪等等,有的機構教務除了這些後期工作,可能還會涉及前期的招生工作,包括接待家長、介紹課程、...
2026-03-03
廣東南華工商職業學院專業校區有什麼專業
廣東南華工商職業學院專業校區有什麼專業
廣東南華工商職業學院專業校區有什麼專業?建築裝飾工程技術專業環境藝術設計專業,現在小編就來說說關于廣東南華工商職業學院專業校區有什麼專業?下面内容希望能幫助到你,我們來一起看看吧!廣東南華工商職業學院專業校區有什麼專業建築裝飾工程技術專業。...
2026-03-03
适合女生學的前景好薪資高的專業
适合女生學的前景好薪資高的專業
适合女生學的前景好薪資高的專業?如今,每一年大學畢業生數量有很多,這也就導緻就業壓力變得越來越大,有的學生一畢業既失業,有的學生雖然找到了工作,但是和自己所學專業不對口,因此,對于家長和考生們來說,都希望能夠選擇一個在畢業以後,工作穩定、就...
2026-03-03
普工工資8000以上的工廠招工
普工工資8000以上的工廠招工
工廠招工,已經過去大半年時間,招工啟事依然貼在廠門口,看陣勢是要打“長期”戰的準備。工廠長期招工,最大的問題還是工人的離職率太高。招聘進來的工人,趕不上離職的工人。最近一位在東莞某電器廠做管理的老員工,他看到工廠的招工啟事上寫着“招聘流水線...
2026-03-03
Copyright 2023-2026 - www.tftnews.com All Rights Reserved