码迷,mamicode.com
首页 > Web开发 > 详细

CSS3写常用的形状

时间:2015-07-13 20:32:34      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

正方形:

 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 }

 


 

CSS3写常用的形状

标签:

原文地址:http://www.cnblogs.com/BaishangBloom/p/4643658.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!