正六角形_01

codepen 範例連結

中間寬度 200 px 梯形

  • 先把六角形拆解成梯形分上下兩部分。
  • 正六角型角度是固定的 120 度,算法如上 。
  • 上下兩層分別使用定位 relative 與 absolute 。
  • 上層 .border-top 設 0 ,border-bottom 設定上方算出的高度 87 px 。下層則相反。
.hex100{
    width: 100px;
    border-top:0px solid transparent;
    border-bottom: 87px solid #9dd3a8;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    position: relative;
}

.hex100:before{
    position: absolute;
    content: '';
    width: 100px;
    height: 0;
    border-top:87px solid #9dd3a8;
    border-bottom: 0px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    top:87px;
    right: -50px;
}

中間寬度 100 px 梯形算法

  • 如上方程式碼依序帶入下方數值即可。

width : (50 cos(60)) = 25
height : (50
sin(60)) = 43


資料來源

最後修改日期: 8 月 6, 2020

作者

留言

撰寫回覆或留言

發佈留言必須填寫的電子郵件地址不會公開。