web前端css實現六邊形效果


css六邊形邊框

第一步、分解圖形

拆分成一個長方形和兩個正方形

  1. 三角形是正方形的一半
  2. 用偽元素實現一個正方形
  3. 旋轉45度(transform:rotate(45deg))

 

等腰直角三角形是特殊的等腰三角形,它的特點是:

(1)兩底角等於45°。

(2)兩腰相等。

(3)等腰直角三角形三邊比例為1:1:√2

所以最終的代碼是這樣的

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM