CSS 手把手教你用CSS畫三角形

2021-09-30 16:36:18 字數 844 閱讀 6363

用到的html**如下:

咋們先給div乙個簡單的效果:

接下來讓div的四個邊擁有不同的顏色

.********
可以看到四個border都變成了梯形

現在我們想一下梯形和三角形的關係

梯形的上底面的寬度為0就是三角形!!!!

而圖中黑色的寬高就是梯形的上底面!!

於是把div的寬高設為0,再把背景顏色去掉就有:

想用哪個三角形,只需要把其他三角形的border顏色設為透明( border-right-color:transparent)

比如:

.********
還有最後乙個問題:我們有時候需要這樣(紫色或者綠色)的三角形,如何實現這樣的乙個效果呢?

可以先思考一下~

經過思考可以發現,這個三角形實際上被一刀切成了兩半,我們只需要把border-top的寬度設為0,只留下border-bottom的寬度即可實現

**如下:

.********

手把手教你用Ucos

ucos作業系統的學習 實時作業系統 任務切換,排程 分式作業系統 不可剝奪型核心 ucosii嵌入式實時作業系統的源 分為三部分 與硬體無關的核心 與處理器有關的移植 和使用者配置檔案。ucos最多支援64個任務,優先順序分別對應0 63,其中0為最高優先順序,系統保留4個最高優先順序的任務,和4...

手把手教你用Charles抓包

日常開發過程中難免要進行抓包,檢視服務端返回的資料是否正常,而charles可謂是抓包利器了。配置好以後,charles實際上讓電腦成了乙個中間 伺服器,我們手機上的所有請求都會經過電腦,被charles攔截,然後charles把自己偽裝成手機向我們的遠端伺服器位址傳送請求,所以charles能記錄...

手把手教你用Python實踐深度學習

課程共七章,採用最新版本進行教學,2018必學技術 第一章 從人工智慧到深度學習 第二章 使用tensorflow keras 建構人工神經網路 artificial neural network 第三章 卷積神經網路 convolutional neural network 第四章 迴圈神經網路 ...