首页
/
每日頭條
/
職場
/
css動态計算百分比
css動态計算百分比
更新时间:2026-08-05 21:29:51

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
推荐阅读
港澳個人旅遊自助簽注如何辦理
港澳個人旅遊自助簽注如何辦理
即日起,陝西省123個市、區、縣建設的24小時自助服務廳已全面投入使用。今後,無論在大城市還是偏遠的小縣城,辦理往來港澳台旅遊簽注,都可在任何時間實現3分鐘辦結的便利。據陝西省公安廳出入境管理局相關負責人介紹,全省123個公安出入境24小時...
2026-08-05
一級建築物的設計使用年限
一級建築物的設計使用年限
轉載自“肖從真工作室公衆号”前幾天有人問我,為什麼重要的建築要連乘兩個1.1,是不是重複了,我很是不解,哪要求連乘了?後來才明白,原來是他沒有搞清安全等級和設計工作年限的關系。我們來梳理一下這兩個概念。先看安全等級,《工程結構通用規範》裡規...
2026-08-05
客戶經理需要具備哪些軟技能
客戶經理需要具備哪些軟技能
客戶經理是一家信貸機構最寶貴的資源,是信貸機構最核心的競争力。客戶經理是直接與客戶接觸的第一線人員,工作具有很強的複雜性,客戶經理的素質直接決定了信貸機構的經營水平和客戶經理個人的業績水平。如何選拔、培育出優秀的客戶經理是各家銀行提高競争力...
2026-08-05
觸摸液晶屏的基本工作原理是什麼
觸摸液晶屏的基本工作原理是什麼
觸摸顯示屏大家肯定都不陌生,現在越來越多的東西使用觸屏顯示屏,除了手機和電腦還有卡拉Ok的點歌操作屏幕,電影院門口的電子屏取票顯示器甚至一些經典的地圖都換成了觸摸顯示屏的了,越來越智能化的科技帶來的是更便利的生活。那麼大家知道,觸摸顯示屏是...
2026-08-05
如何逼不聽話的員工離職
如何逼不聽話的員工離職
沒有我逼不走的人,這是某HR的豪言壯語,面對以下逼迫員工離職的套路,你能抗住幾招?今天帶你扒一扒逼迫員工離職又深又黑的套路,最後告訴你怎麼辦?第1⃣招偷天換日通過給你換崗曆練,明面上是說多崗位鍛煉,挖掘潛力,儲備管理人才。但你搞研發的非讓你...
2026-08-05
Copyright 2023-2026 - www.tftnews.com All Rights Reserved