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

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
推荐阅读
職場上的弱者遇見生活中的弱者
職場上的弱者遇見生活中的弱者
文|蝸牛家族在職場,當一個人勢單力薄的時候,能夠盡盡自己所能去幫助别人,幫上比他更弱小的人,一旦這樣的人抓住機會,更能夠成為大器。【1】自不量力才能讓更多的人認同你當一個人去辦好事,或者是幫助别人,雖然這種行為值得稱贊,但是也會有些人懷疑你...
2026-03-10
鬥詭赤練怎麼分配技能
鬥詭赤練怎麼分配技能
1、初始角色——刀狂刀狂角色為男性,使用單手刀武器進行戰鬥。刀狂角色設定為刀邪後裔,家族隐逸山野,族中男子自幼傳習一套至陽至剛的刀法,成年後便依照家訓出山行俠仗義。2、初始角色——劍靈劍靈角色為女性,使用單手劍武器進行戰鬥。劍靈角色設定為劍...
2026-03-10
英國護士不用防護器
英國護士不用防護器
英國護士不用防護器?新冠疫情目前全球依舊在發展,作為工作在一線的醫護人員非常辛苦特别是每天裹在密不透風的防護服内,悶熱的很脫下防護服,恐怕要帶出來半斤汗水,我來為大家科普一下關于英國護士不用防護器?下面希望有你要的答案,我們一起來看看吧!英...
2026-03-10
自吸泵有哪些結構
自吸泵有哪些結構
自吸泵有哪些結構?自吸泵在市場上受到許多客戶寵愛,因為它的多功能性、方便操作、吸程高、揚程高、流量大等特點,那自吸泵的工作原理是什麼呢?,我來為大家講解一下關于自吸泵有哪些結構?跟着小編一起來看一看吧!自吸泵有哪些結構自吸泵在市場上受到許多...
2026-03-10
張翰和張鈞甯是否在一起
張翰和張鈞甯是否在一起
對于張鈞甯和張翰之間的關系,一些網友還停留在《溫暖的弦》,這部電視劇的合作上,雖然這還是一部霸道總裁的偶像劇,但是張翰和張鈞甯的演技,成功駕馭住了兩個角色,一時間這對劇中的cp被炒得很熱。而這兩個人最近突然傳出了,已經結婚領證的消息,還稱他...
2026-03-10
Copyright 2023-2026 - www.tftnews.com All Rights Reserved