CSS3写常用的形状

正方形：

1 .square{ width: 100px;height: 100px; background: #E57779;}

长方形：

1 .rectangle{ width: 200px;height: 100px; background: #E57779;}

圆形：

1 .circle{ width: 100px;height: 100px;background: #E57779;
2      border-radius: 50%;
3 }

椭圆形：

1 .oval{ width: 200px; height: 100px; background: #E57779;
2         border-radius: 50%;
3 }

三角形-上：

1 /*三角形-上
2  * 左右下，下为左右宽度的2倍*/
3
4 .triangle_t{width: 0;height: 0;
5     border-left: 50px solid transparent;
6     border-right: 50px solid transparent;
7     border-bottom: 100px solid #E57779;
8 }

三角形-下：

1 /*三角形-下
2  * 左右上，上为左右宽度的2倍*/
3 .triangle_b{width: 0;height: 0;
4     border-left: 50px solid transparent;
5     border-right: 50px solid transparent;
6     border-top: 100px solid #E57779;
7 }

三角形-左：

1 /*三角形-左
2  * 上下右，右为上下宽度的2倍*/
3 .triangle_l{width: 0;height: 0;
4         border-top: 50px solid transparent;
5         border-right: 100px solid #E57779;
6         border-bottom: 50px solid transparent;
7 }

三角形-右：

1 /*三角形-右
2  * 上下左，左为上下宽度的2倍*/
3 .triangle_r{width: 0;height: 0;
4     border-top: 50px solid transparent;
5     border-left: 100px solid #E57779;
6     border-bottom: 50px solid transparent;
7 }

对话泡泡：

 1 /*对话泡泡=小三角+长方形
 2  *对话泡泡-长方形
 3  *  */
 4 .talkboxes{ width: 200px; height: 100px; background: #E57779;
 5      border-radius: 15px;
 6      position: relative;
 7  }
 8  /*对话泡泡=小三角+长方形
 9  *对话泡泡-小三角
10  *  */
11  .talkboxes:before{  width: 0; height: 0;
12      content: " ";
13     position: absolute;
14     top: -26px;
15     left: calc(50% - 13px);
16     border-left: 13px solid transparent;
17     border-bottom: 26px solid #E57779;
18     border-right: 13px solid transparent;
19 }

六边形：

 1 /*六边形=上三角+长方形+下三角
 2  * 六边形-上三角
 3  * */
 4 .sexangle:before{width: 0;height: 0;
 5     content: " ";
 6     position: absolute;
 7     top:-30px;
 8     border-left: 50px solid transparent;
 9     border-right: 50px solid transparent;
10     border-bottom: 30px solid #E57779;
11 }
12 /*六边形=上三角+长方形+下三角
13  * 六边形-长方形
14  * */
15 .sexangle{ width: 100px; height: 55px; background: #E57779;position: relative;top: 25px;}
16 /*六边形=上三角+长方形+下三角
17  * 六边形-下三角
18  * */
19 .sexangle:after{width: 0;height: 0;
20     content: " ";
21     position: absolute;
22     bottom:-30px;
23     border-left: 50px solid transparent;
24     border-right: 50px solid transparent;
25     border-top: 30px solid #E57779;
26 }

六边形1：

 1 .sexangle1:before{width: 100px; height: 63px; background: #E57779;
 2     content: " ";
 3     display: block;
 4     transform:rotate(-60deg);
 5     border-radius: 10px;
 6 }
 7 .sexangle1{ width: 100px; height: 63px; background: #E57779;margin-top: 30px;
 8     position: relative;
 9     transform:rotate(30deg);
10     border-radius: 10px;
11
12 }
13 .sexangle1:after{width: 100px; height: 63px; background: #E57779;
14     content: " ";
15     display: block;
16     position: absolute;
17     top: 0;
18     transform:rotate(60deg);
19     border-radius: 10px;
20 }