CSS学习笔记一：css 画平面图形

最近在学习CSS，先从CSS画点平面图形入手，发现除了正方形、长方形此类比较简单，只要有长宽设置恰当即可，画圆要涉及radius，然后恢复到做界面的最讨厌的状态了，不断的修改设值，调整数据，所幸并不多。下面就进入正文介绍吧，先将图形以及代码摆放出来，然后讲解下如何画，以及一些小细节。

1、正方形

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>triangle</title>
 5     <style type="text/css">
 6         div
 7         {
 8             width:110px;
 9             height:110px;
10             border-right: 1px solid yellow;
11             /*transparent 变透明*/
12             border-left:1px solid yellow;
13             border-bottom: 1px solid pink;
14             border-top: 1px solid pink;
15         }
16 
17     </style>
18 </head>
19 <body>
20 <div></div>
21 
22 </body>
23 </html>

正方形就比较简单，只要设置长宽，长宽一样则为正方形，不一样则为长方形。

2、三角形

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>triangle</title>
 5     <style type="text/css">
 6         
 7     div
 8         {
 9             width:0px;
10             height:0px;
11             border-right: 50px solid transparent;
12             /*transparent 变透明*/
13             border-left:50px solid transparent;
14             border-bottom: 100px solid transparent;
15             border-top: 100px solid pink;
16             
17 
18         }
19 
20         
21 
22     </style>
23 </head>
24 <body>
25 <div></div>
26 
27 </body>
28 </html>

从长方形向三角形转化，首先去除宽高的像素，这样子看上去便有了四个三角形，如何去除多余三角形，这里可以利用transparent，来将他们隐藏起来，想要三角形的位置不一样，隐藏的边界也不是一样。例如只要向下的三角形，就把左右下的三条边变透明（一般左右border一样画出来的三角形是等腰三角形，上下左右border一样画出来为等边三角形，直角三角形看你要的直角转向而定，直角三角形只要有留两个边即可，示例border-left:100px solid transparent; border-top: 100px solid pink;）

3、梯形

 1 div
 2         {
 3             width:30px;
 4             height:0px;
 5             border-right: 50px solid transparent;
 6             /*transparent 变透明*/
 7             border-left:50px solid transparent;
 8             border-bottom: 100px solid transparent;
 9             border-top: 100px solid pink;
10             
11 
12         }

梯形是在三角形的基础上，将width不设为0，便有梯形。

4、平行四边形

 1 div
 2     {
 3         width:100px;
 4         height:100px;
 5         border:1px solid pink;        
 6         transform: skew(20deg,0deg);
 7         -ms-transform: skew(20deg,0deg); /* IE 9 */
 8         -webkit-transform: skew(20deg,0deg); /* Safari and Chrome */
 9             
10     }    
11

平行四边形主要是在正方形或者长方形的基础上，利用css的transfrom:skew来拉伸扭曲，其 x 轴动，y轴不变。

5、圆形

 1 div
 2 {
 3             
 4     width:100px;
 5     height:100px;
 6     border:1px solid pink;        
 7     border-radius: 50%;
 8     -ms-border-radius: 50%; /* IE 9 */
 9     -webkit-border-radius: 50%; /* Safari and Chrome */
10             
11 
12 }

radius来设置其弯曲程度（用来画圆角），border-radius:50%是指其水平弯曲程度，等价于

border-top-left-radius: 50% ;border-top-right-radius: 50% ; border-bottom-right-radius: 50% ;border-bottom-left-radius: 50% ;从左上角，右上角，左下角，右下角，四个地方分别入手。

6、蛋

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>triangle</title>
 5     <style type="text/css">
 6         body
 7         {
 8             margin:  100px;
 9             text-align: center;
10         }
11         div{
12             width: 100px;
13             height: 140px;
14               /*等价式border-radius: 50% 50% 50% 50% / 65% 65% 40% 40%;;*/
15             border-top-left-radius: 50% 65%;
16             border-top-right-radius: 50% 65%;
17             border-bottom-right-radius: 50% 40%;
18             border-bottom-left-radius: 50% 40%;
19             /*    水平半径，垂直半径*/
20             border: 1px solid pink;
21 
22         }
23     </style>
24 </head>
25 <body>
26 <div>I just an egg!</div>
27 
28 </body>
29 </html>

radius在 / 前面设置的值也不一样，前面为水平弯曲，后面为垂直弯曲，根据设置的值不同能画出不一样的图形，比如想画个椭圆，就修改下里面的值便可。

7、五角星

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>triangle</title>
 5     <style type="text/css">
 6         body
 7         {
 8             margin:  100px;
 9         }
10         div{
11             width: 0;
12             height: 0;
13             color: red;
14             margin: 50px 0;
15             position: relative;
16             display: block;
17             border-bottom:100px solid pink;    
18             border-left: 35px solid transparent;
19             border-right:35px solid transparent;
20         }
21 
22         div:before{
23             width: 0;
24             height: 0;
25             position: absolute;
26             top: -40px;
27             left: -98px;
28             color: white;
29             display: block;
30             content: "";
31             border-right: 60px solid pink;
32             /*transparent 变透明*/
33             border-left:90px solid  transparent;            
34             border-top: 90px solid  transparent;
35             border-bottom: 90px solid  transparent;
36             transform: rotate(56deg);
37             -moz-transform:rotate(56deg);
38             -webkit-transform:rotate(56deg);
39             -ms-transform:rotate(56deg);
40         }
41         div:after{
42             width: 0;
43             height: 0;
44             position: absolute;
45             top: -40px;
46             left: -49px;
47             color: white;
48             display: block;
49             content: "";
50             border-right: 60px solid pink;
51             /*transparent 变透明*/
52             border-left:90px solid  transparent;            
53             border-top: 90px solid  transparent;
54             border-bottom: 90px solid  transparent;
55             transform: rotate(125deg);
56             -moz-transform:rotate(125deg);
57             -webkit-transform:rotate(125deg);
58             -ms-transform:rotate(125deg);
59 }
60     
61     </style>
62 </head>
63 <body>
64 <div></div>
65 
66 
67 </body>
68 </html>

画五角星用到了伪类器，这里就不详细介绍，想了解伪类器就去百度下。这里运用伪类器，三层叠加，第一层是个三角形，第二层是一个钝角三角形，第三层也是个钝角三角形，第一层的三角形由前面的三角形构造而来，前面也讲过如何去画出不同方向的三角形以及设置。这里的角度利用rotate去旋转角度，然后通过top，left，以及position等来让他们位置重合，displace:block，来让他们叠合覆盖。

8、心形

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>triangle</title>
 5     <style type="text/css">
 6         body
 7         {
 8             margin:  100px;
 9         }
10         div{
11     
12         }
13 
14         div:before{
15             position: relative;
16             top: 61px;
17             left:43px;
18             display: block;
19             content: "";
20             position: relative;
21             display: block;
22             border-radius: 100px 100px 0px 0px;
23             background: #8AC007;
24             padding: 20px; 
25             width: 40px;
26             height: 100px; 
27             transform: rotate(45deg);
28             
29            
30            
31          
32         }
33         div:after{
34             position: absolute;
35             top: -80px;
36             left:0px;
37             display: block;
38             content: "";
39             position: relative;
40             display: block;
41             border-radius: 100px 100px 0px 0px;
42             background: #8AC007;
43             padding: 20px; 
44             width: 40px;
45             height: 100px; 
46             transform: rotate(-45deg);
47             
48 }
49     
50     </style>
51 </head>
52 <body>
53 <div></div>
54 
55 
56 </body>
57 </html>

画心形，我曾用来两种方法，最后采用第二种，第一种是用两个圆和正方形叠加来做，但是做出来的效果不好，不够圆滑，所以后来用第二种方法，用两个长方形来画，同时将长方形的左上角，右上角圆化，然后两者叠加，做出的效果也好看。（不要问我为什么这颗心时绿色我，青青草原也挺好的）

9、对话框

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>triangle</title>
 5     <style type="text/css">
 6         body
 7         {
 8             margin:  100px;
 9         }
10         div{
11             
12         }
13 
14         div:before{
15             position: relative;
16             top: 55px;
17             left:15px;
18             display: block;
19             content: "";
20             position: relative;
21             display: block;
22             width:0px;
23             height:0px;
24             border-right: 70px solid  #8AC007;
25             /*transparent 变透明*/
26             border-left:100px solid transparent;
27             border-bottom: 10px solid transparent;
28             border-top: 10px solid transparent;
29             transform: rotate(-10deg);   
30          
31         }
32         div:after{
33             position: absolute;
34             top: 0px;
35             left:150px;
36             display: block;
37             content: "";
38             position: relative;
39             display: block;
40             background: #8AC007;
41             border-radius: 10px 10px 10px 10px;
42             padding: 20px; 
43             width: 100px;
44             height: 20px; 
45             box-shadow: 2px 2px #aaaaaa;
46  
47             
48 }
49     
50     </style>
51 </head>
52 <body>
53 <div></div>
54 
55 
56 </body>
57 </html>

对话框是由长方形和三角形叠加而来的，同时将长方形做了四个圆角，看上去比较上眼，为了让对话框由立体感，增加了阴影效果box-shadow: 2px 2px #aaaaaa;

10、波浪框

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>triangle</title>
 5     <style type="text/css">
 6         body
 7         {
 8             margin:  100px;
 9             text-align: center;
10         }
11         div{
12             width: 100px;
13               height: 50px;
14               border-radius: 2em 1em 4em / 0.5em 3em;
15               border: 3px solid pink;
16 
17         }
18 
19         
20 
21     </style>
22 </head>
23 <body>
24 <div>Skylar!</div>
25 
26 
27 </body>
28 </html>

波浪框是个随机产物，但是个人觉得挺好看的保留下来。

对于CSS，个人觉得其设值是很有意思，因为你在大多数情况下，你不知道你设的值回带来什么的效果。所以，尝试深入体会其趣味。

posted @ 2017-07-23 17:13 Skylar_Zhan 阅读(626) 评论(0) 编辑收藏举报

Skylar

CSS学习笔记一：css 画平面图形

公告