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;
}