本篇是以下兩篇文章的轉載和總結

純CSS畫基本形狀
用CSS畫三角形，普通版，文藝小陰影版~

1、畫方形

width:100px;
height:100px;
background:red;

正方形

2、畫正圓

width:100px;
height:100px;
background:red;
border-radius:50%;

正圓

3、畫橢圓

width:200px;
height:100px;
background:red;
border-radius:100px / 50px;

橢圓

4、畫個border理解圖，再畫三角形

width:100px;
height:100px;
background:#ddd;
border-top:30px solid red;
border-left:30px solid blue;
border-right:30px solid green;
border-bottom:30px solid black;

盒模型理解

接下來把盒模型的寬高都變成0

width:0;
height:0;
background:#ddd;
border-top:30px solid red;
border-left:30px solid blue;
border-right:30px solid green;
border-bottom:30px solid black;

寬高為0

然后把相應border的顏色改成transparent就可以看到三角形了

width:0;
height:0;
background:transparent;
border-top:30px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid transparent;

三角形

width:0;
height:0;
background:transparent;
border-top:30px solid transparent;
border-left:30px solid blue;
border-right:30px solid transparent;
border-bottom:30px solid transparent;

三角形

當然，也可以這樣，只需要更改相應的顏色就可以了。

width:0;
height:0;
background:transparent;
border-top:30px solid blue;
border-left:30px solid blue;
border-right:30px solid transparent;
border-bottom:30px solid transparent;

屏幕快照 2017-05-06 下午1.36.34.png

還可以改變高度成為這樣：

width:0;
height:0;
background:transparent;
border-top:50px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid transparent;

這樣也可以的

那我們如何給這個三角形加個外陰影呢？用box-shadow試試看~

width:0;
height:0;
background:transparent;
border-top:50px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid transparent;
box-shadow：0 0 5px rgba(0,0,0,0.9)

帶陰影

陰影是出來了，但是并沒有圍繞著三角形，而是圍繞著整個border顯現出來。接下來按照抄來的一個思路來解決這個問題，大致的思路就是，用after來進行疊加以畫出陰影效果。

???詳細的思路在這篇文章里

div.child{
      width:70px;
      height:50px;
      /* border:1px solid green; */
      position:relative;
      box-shadow:0 5px 3px -4px rgba(0,0,0,0.3);
      overflow:hidden;
    }
    div.child:after{
      content:'';
      position:absolute;
      width:50px;
      height:50px;
      border:1px solid red;
      background:red;
      box-shadow: 0 0 3px rgba(0,0,0,0.3);
      left:9px;
      top:30px;
      transform:rotate(45deg);
    }

這是效果

帶陰影的三角形

先總結到這里，有時間再畫平形四邊形和其它形狀。