CSS3写常用的形状

正方形：

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

 

长方形：

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

 

圆形：

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

 

椭圆形：

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

 

三角形-上：

 /*三角形-上
  * 左右下，下为左右宽度的2倍*/

 .triangle_t{width:;height:;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 100px solid #E57779;
 }

 

三角形-下：

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

 

三角形-左：

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

 

三角形-右：

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

 

对话泡泡：

 /*对话泡泡=小三角+长方形
  *对话泡泡-长方形
  *  */
 .talkboxes{ width: 200px; height: 100px; background: #E57779;
      border-radius: 15px;
      position: relative;
  }
  /*对话泡泡=小三角+长方形
  *对话泡泡-小三角
  *  */
  .talkboxes:before{  width:; height:;
      content: " ";
     position: absolute;
     top: -26px;
     left: calc(50% - 13px);
     border-left: 13px solid transparent;
     border-bottom: 26px solid #E57779;
     border-right: 13px solid transparent;
 }

 

六边形：

 /*六边形=上三角+长方形+下三角
  * 六边形-上三角
  * */
 .sexangle:before{width:;height:;
     content: " ";
     position: absolute;
     top:-30px;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 30px solid #E57779;
 }
 /*六边形=上三角+长方形+下三角
  * 六边形-长方形
  * */
 .sexangle{ width: 100px; height: 55px; background: #E57779;position: relative;top: 25px;}
 /*六边形=上三角+长方形+下三角
  * 六边形-下三角
  * */
 .sexangle:after{width:;height:;
     content: " ";
     position: absolute;
     bottom:-30px;
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 30px solid #E57779;
 }

 

六边形1：

 .sexangle1:before{width: 100px; height: 63px; background: #E57779;
     content: " ";
     display: block;
     transform:rotate(-60deg);
     border-radius: 10px;
 }
 .sexangle1{ width: 100px; height: 63px; background: #E57779;margin-top: 30px;
     position: relative;
     transform:rotate(30deg);
     border-radius: 10px;

 }
 .sexangle1:after{width: 100px; height: 63px; background: #E57779;
     content: " ";
     display: block;
     position: absolute;
     top:;
     transform:rotate(60deg);
     border-radius: 10px;
 }