首页
/
每日頭條
/
職場
/
css動态計算百分比
css動态計算百分比
更新时间:2024-12-29 18:19:59

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
推荐阅读
湖南商務職業技術學院結構圖(湖南商務職業技術學院喜迎70周年校慶)
湖南商務職業技術學院結構圖(湖南商務職業技術學院喜迎70周年校慶)
     “校友林”捐建活動揭牌儀式。   紅網時刻12月6日訊 (記者 李兵 通訊員 袁勤思)弦歌不辍傳薪火,青山峰下迎俊賢。12月5日,湖南商務職業技術學院迎來70周年慶典。來自四面八方的校友和社會各界人士齊聚青山下,共話母校發展,共憶芳華歲月,共叙師生情誼。   湖南商務職院誕生于新中國成立之際,成長于國家振興之時。作為新中國最早設立的商科學校之一,八...
2024-12-29
41歲女老闆和小男友見面(外國男子向女老闆表白)
41歲女老闆和小男友見面(外國男子向女老闆表白)
  愛情這種東西很奇妙,在旁人的眼裡并不看好,但偏偏卻愛着如膝似歡。   或許隻有當局者才能知道對方對自己的感情。   近日,在廣東廣州一間經營茶葉的店鋪裡面,一名外國男子捧着黃色玫瑰花單腳下跪向這間店鋪的女老闆表白,在表白的過程當中,這名外國男子不斷用英語反複在說,你願意嫁給我嗎?   這位女老闆被突如其來的一面吓着了,她害羞低下頭并收下這名男子的花朵。 ...
2024-12-29
學校綜合素質評價工作介紹(牢記光榮使命奮勇逐夢前行)
學校綜合素質評價工作介紹(牢記光榮使命奮勇逐夢前行)
  11月6日,長春五十二中赫行實驗學校召開了“長春五十二中赫行實驗學校綜合素質評價啟動大會”,深入推進學生綜合素質評價工作。      江西校長進行總結   會上,江西校長強調了學生綜合素質評價工作的重要性。江西校長說,綜合素質評價的存在十分必要,就如同“值日班長”的存在十分重要,并進一步提出應該有“值日主任”、“值日校長”,用生動的真實事例說明“值日班長...
2024-12-29
印度火車上人擠得爆棚(印度上班族擠火車)
印度火車上人擠得爆棚(印度上班族擠火車)
  印度和中國一樣都是人口大國,然而在交通建設方面,印度與我們中國卻有着十萬八千裡的差距。當中國高鐵被外國人民贊不絕口時,印度火車卻還是大家眼裡的一個“奇觀”。近日,一名29歲工程師蒂瓦裡拍下印度民衆搭火車通勤的一段視頻就在網絡上引起轟動。      印度從1853年就開始有了火車,并且成為亞洲最早擁有火車的國家。因為印度火車的車次不多,加上人口數量過多,很...
2024-12-29
電商運營的工作業績(做任務領獎賞協同辦公應用)
電商運營的工作業績(做任務領獎賞協同辦公應用)
     似乎很多人都觊觎協同辦公這一領域,在他們看來,主要原因是現在的同類産品并沒有提出很好的解決方案。   我曾經寫過幾個此款産品,也一直是這類産品的忠實用戶。但當工作趣的負責人向我介紹其産品時,我還是有眼前一亮的感覺。   工作趣允許用戶在發布一條任務時,附帶獎勵。 舉例來說,BOSS 将“采訪工作趣創始人”的任務分配給我,随即附帶了“獎勵 500 元...
2024-12-29
Copyright 2023-2024 - www.tftnews.com All Rights Reserved