1、正圆形

        给正方形盒子设置圆角属性为宽高的50%。

div {
  width: 100px;
  height: 100px;
  background-color: plum;
  border-radius: 50%;
}   

2、胶囊形

        给长方形盒子设置圆角属性为盒子高度的50%。

div {
  width: 200px;
  height: 100px;
  background-color: plum;
  border-radius: 50px;
} 

3、椭圆形

        给长方形盒子设置圆角属性为盒子宽高的50%。 

4、三角形

        苦熬高设置为0，再通过border进行设置即可，若只要下方三角形，将其他三边的border颜色设置为transprent即可。

div {
  width: 0;
  height: 0;
  border-top: 50px solid yellowgreen;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid bisque;
  border-right: 50px solid chocolate;
}

div {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

5、梯形

        在三角形的基础上设置宽度即可。

div {
  width: 50px;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

6、菱形

        将正方形旋转45度，即可。 

div {
  height: 100px;
  width: 100px;
  transform: rotate(45deg);
  background-color: #ffaaff;
}