CSS-画图形

1. 三角形

原理是将盒子的宽高均设置成0，再通过border来画三角形。

1.1 普通三角形

指向下面的三角形

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid skyblue;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
}

指向右边的三角形

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid skyblue;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
}

1.2 直角三角形

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid skyblue;
    border-right: 100px solid transparent;
}

1.3 等边三角形

120px相当于等边三角形的高，而69px相当于等边三角形底边的一半。

看这个图会很好理解：

.triangle {
  width: 0;
  height: 0;
  border-left: 69px solid transparent;  
  border-right: 69px solid transparent;  
  border-bottom: 120px solid skyblue; 
}

1.4 空心三角形

利用伪元素和定位来实现，通过伪元素创造一个小三角形，并移动到大三角形中即可：

.border {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 50px;
  border-color: transparent transparent #d9534f;
  position: relative;
}

.border::after {
  content: '';
  border-style: solid;
  border-width: 0 40px 40px;
  border-color: transparent transparent #96ceb4;
  position: absolute;
  top: 6px;
  left: -40px;
}

2. 扇形

重点是利用border-radius:100%，使得半径=100%*盒子的宽/高

    .shape {
        width: 100px;
        height: 100px;
        background-color: red;
        /* 左上角border-radius:100px(水平半径)/100px(垂直半径) 100%就是100%去乘以宽和高得到半径*/
        border-radius: 100% 0 0 0;
    }

另一种

  .div1 {
    border: 100px solid transparent;
    width: 0;
    height: 0;
    border-radius: 100px;
    border-top-color: red;
  }

3. 半圆形

  .div1 {
    background-color: red;
    width: 100px;
    height: 50px;
    border-radius: 0px 0px 100px 100px;
  }

4. 圆形

  .div1 {
    background-color: red;
    height: 100px;
    width: 100px;
    border-radius: 50%;
  }

5. 梯形

直角梯形

  .div1 {
    height: 0;
    width: 100px;
    border-bottom: 100px solid red;
    border-right: 40px solid transparent;
  }

等腰梯形

  .div1 {
    height: 0;
    width: 100px;
    border-width: 0 40px 100px 40px;
    border-style: none solid solid;
    border-color: transparent transparent red;
  }