首页
/
每日頭條
/
職場
/
css動态計算百分比
css動态計算百分比
更新时间:2026-03-15 10:55:32

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
推荐阅读
武漢商貿職業學院紅安校區入學
武漢商貿職業學院紅安校區入學
武漢商貿職業學院紅安校區入學?紅安網消息祝傑報道:4月27日上午,武漢商貿職業學院紅安産學研基地迎來了第一批實習實訓大學生70餘人,分别是武漢商貿職業學院設計學院大一景觀設計專業和大二建築工程技術專業的學生,他們在為期半天的實習實訓課程中,...
2026-03-15
職場成長秘籍
職場成長秘籍
職場成長秘籍?1選擇平台優于努力選擇平台标準,今天小編就來聊一聊關于職場成長秘籍?接下來我們就一起去研究一下吧!職場成長秘籍1選擇平台優于努力選擇平台标準1.1強大的客戶精神,創造超出均線的客戶價值—價格高且市占率高,且可持續1.2有效率—...
2026-03-15
簡曆當中的工作經曆怎樣寫
簡曆當中的工作經曆怎樣寫
例如你求職的意向職位是汽車銷售,那就寫上你有關于汽車銷售的經驗便可,不需要把無關的經驗也寫出來。而對于應屆畢業生來說,有的為了顯示自己的工作經驗,就喜歡把所有做過的全部兼職、實踐寫上簡曆。如果你真的沒有太正式的工作經曆,寫上個人實踐和在校兼...
2026-03-15
陳钰琪主要的電視劇
陳钰琪主要的電視劇
陳钰琪是90後顔值頗高的人氣小花,外形清新靓麗,性格文靜内斂,氣質出衆,一出道就備受關注,她曾出演過多部經典古裝作品,塑造得古裝角色美麗又靈動,頗受觀衆喜愛。看多了她的古裝劇,不少觀衆也很比較期待她的現代劇,接下來陳钰琪帶來一部都市懸疑愛情...
2026-03-15
成都市哪些職業學校好考
成都市哪些職業學校好考
四川托普計算機職業學校報考指南【四川托普信息技術職業學院中專部】招生代碼(五年制)51015(三年制)51185肖老師:13688052823,
2026-03-15
Copyright 2023-2026 - www.tftnews.com All Rights Reserved