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

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
推荐阅读
職場宮鬥劇六集
職場宮鬥劇六集
如果看了過往的職場文章,相信各位都知曉,H是M小姐在公司裡很讨厭的一個人,兩人目前處于争鋒相對;2021.07.05,周一郵件規範性上周H讓M小姐跟進200個玻璃杯訂單,由于信息不明确,M小姐當下在辦公室就質問H:“你如果很忙,我可以協助處...
2026-03-12
為什麼加班了要休息
為什麼加班了要休息
來源:中國新聞網中新網10月6日電(中新财經謝藝觀左雨晴)國慶假期,是很多人居家放松、攜伴出遊的日子,但也有一些人放棄休息,選擇加班。他們或在診室一遍遍詢問病情,或為冬季供暖工作做準備,或奔波在大街小巷帶人看房……三甲醫院大夫:病人病情不能...
2026-03-12
家庭社會工作的意義作用
家庭社會工作的意義作用
家庭社會工作的意義作用?《中華人民共和國家庭教育促進法》于今年1月1日正式實施,這是我國首次就家庭教育進行專門立法從立法意圖來看,家庭教育促進法是一部“幫助家長的法律”,通過“引導”和“賦能”,幫助家長轉變教育理念,引導家長按照科學的方法、...
2026-03-12
西南交大本科畢業能進什麼大學
西南交大本科畢業能進什麼大學
文/圓夢志願馬老師西南交通大學始建于1896年,不僅是全國重點大學,也是國内首批211大學,是不少考生心之向往的理工類百年老校之一。作為四川省内名校之一,西南交通大學不論在綜合實力還是學科建設上,都有一定的成績。本文将從多方面為大家分析一下...
2026-03-12
dnf驅魔三覺後怎麼樣
dnf驅魔三覺後怎麼樣
這次DNF韓測服比以往提前了一天更新,在更新後迎來的不是其他職業,正是此前爆料過的大叔職業三覺。雖然魔界人不是很開心,不過按照爆料來看,接下來要三覺的就是她們,所以整體上也是跟着一起慶祝的。這次聖職者的三覺可以說是有喜有憂,有的職業得到了史...
2026-03-12
Copyright 2023-2026 - www.tftnews.com All Rights Reserved