css繪制常見的幾何圖形

　　

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

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

　　

　　Triangle Up(向上的三角形)

　　　

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

 　　　　

　　Triangle Down(向下的三角形)

　　

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

 　　

　　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的軟件有些問題）

　　

　　這里我貼上導航欄處繪制三角形的代碼

.search:before {
    border-bottom-color: #000 !important;
    top: -11px;
}
.search:after, .search:before {
    width: 0;
    height: 0;
    content: '';
    border-style: dashed dashed solid;
    border-color: transparent transparent #fff;
    border-width: 0 10px 10px;
    overflow: hidden;
    position: absolute;
    top: -10px;
    right: 10px;
}

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

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

       Talk Bubble（聊天框）

  

#talkBubble{
    width: 120px;
    height: 80px;
    background: #81cfa2;
    position: relative;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
#talkBubble:before{
    content: "";
    position: absolute;
    right: 100%;
    top: 26px;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 26px solid #81cfa2;
    border-bottom: 13px solid transparent;
}

 

 　　Heart（心形）

#Heart {
        position: relative;
        width: 100%;
        height: 90px;
    }
    
    #Heart:before,
    #Heart:after {
        content: "";
        position: absolute;
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: #FE4C40;
        -moz-border-radius: 50px 50px 0 0;
        border-radius: 50px 50px 0 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
        -webkit-transform-origin: 0 100%;
        -moz-transform-origin: 0 100%;
        transform-origin: 0 100%;
    }
    
    #Heart:after {
        left: 0;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transform-origin: 100% 100%;
        -moz-transform-origin: 100% 100%;
        transform-origin: 100% 100%;
    }

　　　　

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

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