Css繪製形狀

前言：終於個人大一輩子活結束了，迎來了愉快的暑假，你們都開始了各自的忙碌。一直忙着一些項目的事情，終於決定今天要更新一篇博客了，對上一階段的學習作簡單的總結。

　　此次我主要總結一下用Css繪製各類形狀的技巧，同時要結合before、after僞元素和定位作出一些效果。

　　

　　Triangle Up(向上的三角形)

　　　

1 #triangle-up{
2　   width: 0;
3     height:0;
4     border-left:50px solid transparent;
5     border-right: 50px solid transparent;
6     border-bottom: 70px solid #81cfa2;
7  }

 　　　　

　　Triangle Down(向下的三角形)

　　

1 #triangle-down {
2      width: 0;
3      height: 0;
4      border-left: 50px solid transparent;
5      border-right: 50px solid transparent;
6      border-top: 70px solid #81cfa2;
7  }

 　　

　　Triangle Left(向左的三角形)

　　

 

#triangle-left{
       width: 0;
       height:0;
       border-right: 70px solid #81cfa2;
       border-top: 50px solid transparent;
       border-bottom:50px solid transparent;
}

　　　　

　　Triangle TopRight(向右上的三角形)

 

#triangle-topright {
      width: 0;
      height: 0;
      border-top: 100px solid #81cfa2;
      border-left: 100px solid transparent;
}

　　三角形實現比較簡單，同理能夠獲得一些其餘的三角形，繪製三角形主要是另寬高都爲0，而後利用transparent設置其餘部分透明。

可是要學會在本身的項目中結合before和after僞元素以及定位作出一些組合效果，好比我正在作的Oppo社區的一個項目（個人這個作Gif的軟件有些問題）

　　

　　這裏我貼上導航欄處繪製三角形的代碼

  okaychen

 　　可是值得注意的一點事IE6不支持transparent屬性，可是咱們能夠經過設置對應的透明邊框的border-style屬性爲dotted或是dashed便可解決這一問題。

　　 接下來，我在總結幾個經常使用的Css繪製的形狀（結合before和after僞元素）：

       Talk Bubble（聊天框）

  

 1 #talkBubble{
 2     width: 120px;
 3     height: 80px;
 4     background: #81cfa2;
 5     position: relative;
 6     border-radius: 10px;
 7     -webkit-border-radius: 10px;
 8     -moz-border-radius: 10px;
 9 }
10 #talkBubble:before{
11     content: "";
12     position: absolute;
13     right: 100%;
14     top: 26px;
15     width: 0;
16     height: 0;
17     border-top: 13px solid transparent;
18     border-right: 26px solid #81cfa2;
19     border-bottom: 13px solid transparent;
20 }

 

 　　Heart（心形）

 1 #Heart {
 2         position: relative;
 3         width: 100%;
 4         height: 90px;
 5     }
 6     
 7     #Heart:before,
 8     #Heart:after {
 9         content: "";
10         position: absolute;
11         left: 50px;
12         top: 0;
13         width: 50px;
14         height: 80px;
15         background: #FE4C40;
16         -moz-border-radius: 50px 50px 0 0;
17         border-radius: 50px 50px 0 0;
18         -webkit-transform: rotate(-45deg);
19         -moz-transform: rotate(-45deg);
20         transform: rotate(-45deg);
21         -webkit-transform-origin: 0 100%;
22         -moz-transform-origin: 0 100%;
23         transform-origin: 0 100%;
24     }
25     
26     #Heart:after {
27         left: 0;
28         -webkit-transform: rotate(45deg);
29         -moz-transform: rotate(45deg);
30         transform: rotate(45deg);
31         -webkit-transform-origin: 100% 100%;
32         -moz-transform-origin: 100% 100%;
33         transform-origin: 100% 100%;
34     }

　　　　

css能夠繪製不少你想不到形狀，熟練掌握一些經常使用的css繪製圖形的技巧可讓你在項目中游刃有餘。

下一階段我把重點仍然放在node的學習，不急不躁：但願這個暑假我有能力總結出一篇node的博客，而不是隻有在makedown上的一大片筆記。