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

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
推荐阅读
盜賊50級職業任務
盜賊50級職業任務
盜賊50級職業任務?職業訓練師會讓你去“拉文霍德莊園”找NPC領任務PS:莊園位置在“希爾斯布萊德丘陵”東北方,在去辛特蘭的那條小路左邊有一條小山路,下面我們就來說一說關于盜賊50級職業任務?我們一起去了解并探讨一下這個問題吧!盜賊50級職...
2026-03-02
普通二本學生的出路
普通二本學生的出路
随着用人單位對學曆要求的逐漸提高,廣大考生也拼命複習希望進入重點大學學習,但重點大學數量有限,招生規模也比較固定,因而考取難度較大。那麼除了重點本科院校、一本院校,中國還有哪些好的二本院校呢?今天筆者就為大家盤點下國内實力強勁的5所二本院校...
2026-03-02
洛奇英雄傳職業介紹
洛奇英雄傳職業介紹
洛奇英雄傳職業介紹?《洛奇英雄傳》職業一共有四個:分别是法師,對應人物艾菲(Evy);劍盾戰士,對應人物菲歐納(Fiona);雙劍士,對應人物利斯塔(Lethita);巨人,對應人物卡羅,今天小編就來說說關于洛奇英雄傳職業介紹?下面更多詳細...
2026-03-02
先進工作經驗發言材料
先進工作經驗發言材料
先進工作經驗發言材料?尊敬的各位上級領導、同志們:你們好,我來為大家科普一下關于先進工作經驗發言材料?下面希望有你要的答案,我們一起來看看吧!先進工作經驗發言材料尊敬的各位上級領導、同志們:你們好!今天,我能作為上半年度先進工作者而站在這裡...
2026-03-02
臉上幹的脫皮怎麼補救
臉上幹的脫皮怎麼補救
愛美的人士經常會做好皮膚保養工作,但是無論怎麼擦拭護膚品,還是容易出現臉部脫皮症狀,對此許多女性表示十分困擾。因為臉部脫皮會影響個人形象,嚴重時還會導緻皮膚紅腫發癢。臉部脫皮是哪些原因引起的?1、在幹燥的天氣下,皮膚容易出現脫皮、幹燥、粗糙...
2026-03-02
Copyright 2023-2026 - www.tftnews.com All Rights Reserved