前言：終于我的大一生活結(jié)束了，迎來了愉快的暑假，大家都開始了各自的忙碌。一直忙著一些項目的事情，終于決定今天要更新一篇博客了，對上一階段的學(xué)習(xí)做簡單的總結(jié)。

　　這次我主要總結(jié)一下用Css繪制各種形狀的技巧，同時要結(jié)合before、after偽元素和定位做出一些效果。

　　

　　Triangle Up(向上的三角形)

　　　大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

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  }

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 　　　　

　　Triangle Down(向下的三角形)

　　大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

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  }

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 　　

　　Triangle Left(向左的三角形)

　　大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

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

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

　　　　

　　Triangle TopRight(向右上的三角形)

 大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

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

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

　　三角形實現(xiàn)比較簡單，同理可以得到一些其他的三角形，繪制三角形主要是另寬高都為0，然后利用transparent設(shè)置其他部分透明。

但是要學(xué)會在自己的項目中結(jié)合before和after偽元素以及定位做出一些組合效果，比如我正在做的Oppo社區(qū)的一個項目（我的這個做Gif的軟件有些問題）

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

　　

　　這里我貼上導(dǎo)航欄處繪制三角形的代碼

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn) okaychen

 　　但是值得注意的一點事IE6不支持transparent屬性，但是我們可以通過設(shè)置對應(yīng)的透明邊框的border-style屬性為dotted或是dashed即可解決這一問題。

　　 接下來，我在總結(jié)幾個常用的Css繪制的形狀（結(jié)合before和after偽元素）：

       Talk Bubble（聊天框）

  大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 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 }

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 

 　　Heart（心形）

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

 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     }

大數(shù)據(jù)培訓(xùn),云培訓(xùn),數(shù)據(jù)挖掘培訓(xùn),云計算培訓(xùn),高端軟件開發(fā)培訓(xùn),項目經(jīng)理培訓(xùn)

　　　　

css可以繪制很多你想不到形狀，熟練掌握一些常用的css繪制圖形的技巧可以讓你在項目中游刃有余。

下一階段我把重點仍然放在node的學(xué)習(xí)，不急不躁：希望這個暑假我有能力總結(jié)出一篇node的博客，而不是只有在makedown上的一大片筆記。

 http://www.cnblogs.com/okaychen/p/7157487.html