正方形：
1 .square{ 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 }