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

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
推荐阅读
适合上班族的手表男士
适合上班族的手表男士
對于剛畢業初入職場的大學生,都有戴手表的習慣,一方面作用于搭配好看,更重要的是為職場生涯找工作加分,從此打扮可以看出這人的時間觀念和守時态度。一般剛畢業的學生工資還不是很豐厚,錢包不能鼓鼓的同時又想入手一塊稱心如意的機械手表遇見飛克手表就對...
2026-03-12
buck電源與開關電源
buck電源與開關電源
一、Buck開關型調整器:二、CCM及DCM定義:1、CCM(ContinuousConductionMode),連續導通模式:在一個開關周期内,電感電流從不會到0。或者說電感從不“複位”,意味着在開關周期内電感磁通從不回到0,功率管閉合時...
2026-03-12
網絡推廣的工作主要是什麼
網絡推廣的工作主要是什麼
網絡推廣的工作主要是什麼?現在的行業競争越來越大,不少的傳統行業在互聯網信息時代備受沖擊,開始想利用網絡宣傳自己的品牌或者産品,現在小編就來說說關于網絡推廣的工作主要是什麼?下面内容希望能幫助到你,我們來一起看看吧!網絡推廣的工作主要是什麼...
2026-03-12
西安航空職業技術學院代表團
西安航空職業技術學院代表團
西安航空職業技術學院代表團?新華社西安8月21日電題:兼顧“引進來”和“走出去”西安航空職業技術學院國際合作交流探新路,今天小編就來聊一聊關于西安航空職業技術學院代表團?接下來我們就一起去研究一下吧!西安航空職業技術學院代表團新華社西安8月...
2026-03-12
省考如何查詢進面成績
省考如何查詢進面成績
省考如何查詢進面成績?省考(即地方公務員考試)成績成績發布了的話,考生可以通過成績查詢入口查看自己的分數若面試名單已經公布,考生可到當地的人事考試網站下載并查看進入面試名單,若名單上有考生的名字,則該考生獲得進入面試的機會,今天小編就來聊一...
2026-03-12
Copyright 2023-2026 - www.tftnews.com All Rights Reserved