首页
/
每日頭條
/
職場
/
css動态計算百分比
css動态計算百分比
更新时间:2026-03-13 04:02:40

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
推荐阅读
大學生和博士碩士的工資差别
大學生和博士碩士的工資差别
大學生和博士碩士的工資差别?2021年研究生報考人數達到377萬,5年間,考研報名人數翻了近一番博士的人數也在逐年攀升,已經突破十萬大關研究生和博士學曆之間求職、職業發展和薪資之間的差異是什麼呢?,我來為大家科普一下關于大學生和博士碩士的工...
2026-03-13
gems電磁閥3c認證
gems電磁閥3c認證
它是用來控制流體的自動化基礎元件,屬于執行器,并不限于液壓、氣動。不同的電磁閥在控制系統的不同位置發揮作用,最常用的是單向閥、安全閥、方向控制閥、速度調節閥等。它就是電磁閥相信大家都不陌生:電磁閥的工作原理電磁閥裡有密閉的腔,在不同位置開有...
2026-03-13
職場小白應該注意什麼
職場小白應該注意什麼
職場小白應該注意什麼?很多職場小白剛進入一個新公司的時候,會很熱心的幫助同事們做一些力所能及的事情,幫忙裝訂文件,打印複印甚至端茶遞水之類的奉勸一句,這些事情盡量少幫忙,老闆給你錢不是讓你來做勤雜工的,而是幫他創造利潤實在沒什麼事情的時候,...
2026-03-13
個人簡曆中的工作經曆怎麼寫
個人簡曆中的工作經曆怎麼寫
個人簡曆中的工作經曆怎麼寫?個人簡曆中工作經驗怎麼寫非常重要工作經驗中一定要說明的是工作時間段、工作單位、擔任職務、職責、主要工作成績等,下面我們就來說一說關于個人簡曆中的工作經曆怎麼寫?我們一起去了解并探讨一下這個問題吧!個人簡曆中的工作...
2026-03-13
應聘自我介紹範文簡短
應聘自我介紹範文簡短
應聘自我介紹範文簡短?面試簡短自我介紹(一)尊敬的領導:,今天小編就來聊一聊關于應聘自我介紹範文簡短?接下來我們就一起去研究一下吧!應聘自我介紹範文簡短面試簡短自我介紹(一)尊敬的領導:您好!我叫李明,畢業于XX校園,XX專業。我在校園期間...
2026-03-13
Copyright 2023-2026 - www.tftnews.com All Rights Reserved