1、圆形：
width: 50px;
height: 50px;
border-radius: 50%; // 50%~100%之间都行
background: pink;
2、半圆形：（以左圆形为例）
width: 50px;
height: 100px;
border-radius: 50px 0 0 50px;
background: pink;
3、四分之一圆形：（以左上圆形为例）
width: 50px;
height: 50px;
border-radius: 50px 0 0 0;
background: pink;
4、椭圆形：
width: 100px;
height: 75px;
border-radius: 50%;
background: pink;
5、半椭圆形：（以左椭圆形为例）
width: 100px;
height: 75px;
border-radius: 100% 0 0 100%/50%;
/*相当于100% 0 0 100%/50% 50% 50% 50%;*/
background: pink;
通常情况下，border-radius设置圆角的水平和垂直半径是一样的，但也可以对圆角的水平和垂直半径进行单独设置，使用以“/”来区别，“/”前面的值表示圆角的水平半径，“/”后面的值表示圆角的垂直半径。
例如：border-radius: 10px / 5px 15px 相当于border-radius: 10px 10px 10px 10px / 5px 15px 5px 15px 。
6、四分之一椭圆形：（以左上椭圆形为例）
width: 100px;
height: 75px;
border-radius: 100% 0 0 0;
background: pink;
7、菱形：
width: 100px;
height: 50px;
background: pink;
transform: skew(-20deg);
text-align: center;
line-height: 50px;
问题：形状变形后，字体也跟着变形。
解决：让字体旋转回来。
transform: skew(20deg);
8、三角形：（以下三角为例）
利用border属性，把左、右、下边框设置为透明色或与背景色相同的颜色，推荐透明色，这样拓展性更好。
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: pink transparent transparent transparent;
9、带边框的三角形：（以下三角为例）
三角形本身就是border，不可能再给border添加border属性，因此用叠加层的方法。
思路：将两个三角形叠加在一起，外层三角形是一个稍大些的div，颜色设置成边框所需的颜色；内层三角形是通过绝对定位放置在里面的一个div。
内层div的绝对定位应该根据相对定位外层div的内容边界计算，而外层div的宽高均为0，因此内层div应该根据外层div的中心点也就是外层三角形的下顶点来定位。
外层三角形：
position:relative;
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: grey transparent transparent transparent;
内层三角形：
position: absolute;
top: -49px;
left: -48px;
width: 0;
height: 0;
border-width: 48px;
border-style: solid;
border-color: pink transparent transparent transparent;
10、东北、东南、西北、西南三角形（以西北三角形为例）：
width: 0;
height: 0;
border-width: 50px 50px 0 0;
border-style: solid;
border-color: pink transparent transparent transparent;
11、带气泡框的三角形（以上气泡框为例）：
(1)绘制一个带圆角的矩形，设置相对定位以便外层三角形相对其进行绝对定位。
(2)绘制外层三角形，相对矩形进行绝对定位，通过left和margin-left使其相对矩形水平居中，边框颜色设置为气泡框颜色。
(3)绘制内层三角形，相对外层三角形进行绝对定位，边框颜色设置为与矩形背景色同色。
矩形
position:relative;
margin-top:20px;
width:100px;
height:50px;
background:pink;
padding:10px 20px;
border-radius:5px;
border:1px solid grey;
外层三角形：
display:block;
width:0;
height:0;
border-width:15px;
border-style:solid;
border-color:transparent transparent grey transparent;
position:absolute;
top:-30px;
left:50%;
margin-left:-15px;
内层三角形：
display:block;
width:0;
height:0;
border-width:15px;
border-style:solid;
border-color:transparent transparent pink transparent;
position:absolute;
top:-14px;
left:-15px;