画三角形

  1. .triangle {
  2.   width: 0;
  3.   height: 0;
  4.   border-top: 100px solid red;
  5.   border-bottom: 100px solid green;
  6.   border-left: 100px solid orange;
  7.   border-right: 100px solid purple;
  8. }
  10. .triangle {
  11.   width: 100px;
  12.   height: 100px;
  13.   border-top: 50px solid red;
  14.   border-bottom: 50px solid green;
  15.   border-left: 50px solid orange;
  16.   border-right: 50px solid purple;
  17.   border-sizing: border-box;
  18. }
  20. // 向上的三角形
  21. .triangle {
  22.   width: 0;
  23.   height: 0; 
  24.   border-bottom: 100px solid green;
  25.   border-left: 100px solid transparent;
  26.   border-right: 100px solid transparent;
  27. }
  29. // 等边三角形
  30. .triangle {
  31.   width: 0;
  32.   height: 0;
  33.   border-top: 50px solid transparent;
  34.   border-bottom: 50px solid transparent;
  35.   border-left: 50px solid transparent;
  36.   border-right: 86.6px solid orange;
  37.   transfrom：rotate(-30deg);
  38. }

画正六边形

边长相等，再求每个内角。

多边形的内角和公式

连接多边形的任一顶点 A1 与其不相邻的各个顶点的线段，把 n 边形分成（n-2）个三角形
三角函数 - 图1

所以正六边形的每个内角为

  • 三角函数 - 图2

    勾股定理

    直角三角形的两条直角边的平方等于斜边的平方
    image.png
    再由勾股定理，得出三角形的高
    image.png
    从而得出各边与内角的度数

    方案一

    利用 border 画出三角形
    点击查看【codepen】

    方案二

    用三个盒子 + 旋转
    image.png
    点击查看【codepen】