從一滴水提及，談談CSS形狀的生成思路

水是生命之源、生產之要、生態之基。興水利、除水害,事關人類生存、社會進步,從來是治國安邦的大事。巴拉巴拉~不扯淡了，

來看看下面這張圖，額，爲了扣題，就管她叫水滴吧（雖然是倒的），從這開始，讓咱們用css來生成她~

1.首先把她理解成一個圓與一個三角組合而成，這樣，就有了第一種組合法

.box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        border-radius: 50%;
        position: relative;
    }

    .box1::after {
        position: absolute;
        content: '';
        width: 50%;
        height: 50%;
        background-color: #000;
        /*     transform: rotate(45deg) translate(-50%, -50%);
        left: 50%;
        top: 50%;*/
        transform: rotate(45deg);
        left: 25%;
        top: 60%;
    }

簡單粗暴，一個圓加一個旋轉的方塊露出的三角，在這裏還嘗試了下用translate來嘗試定位，雖然失敗了（很差定位，沒旋轉的時候很好用，且能使用基於自身的百分比值來定位，可方便的實現垂直居中）。

2.還有種思路，一個豎着的橢圓，把她的左下右下想把法去掉，而後就有了如下兩種嘗試

.box2 {
        width: 100px;
        height: 100px;
        background-color: red;
        border-radius: 50%;
        position: relative;
    }
    .box2::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        background-color: red;
        background: linear-gradient(-45deg,#fff  67%, transparent 0) right, linear-gradient(45deg, #fff 67%, transparent 0) left;  background-size: 50% 100%;
        background-repeat: no-repeat;
        top: 50%;
    }

再這裏抱個歉，最終效果我沒調成，果真一邊看直播一邊寫demo就是沒效率，話說96B跑的真快啊
先拿一個圓，再拿一個豁了一個三角的長方形給擋住，差很少是這意思~

.box3 {
    width: 100px;
    height: 100px;
    background: linear-gradient(-45deg, transparent 33%, red 0) right, linear-gradient(45deg, transparent 33%, red 0) left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    border-radius: 50% 50%;
    position: relative;
}

這個是上面的改進版，直接對自身使用徑向漸變 ，把左右兩角設爲透明，最終效果也沒調成，囧

3.順着上面的思路，天然想到了能直接對圓進行切割的clip-path屬性雖然兼容堪憂

.box4 {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    -webkit-clip-path: inset(0 0 0 0 round 50% 50% 0 50%);
    -o-clip-path: inset(0 0 0 0 round 50% 50% 0 50%);
    clip-path: inset(0 0 0 0 round 50% 50% 0 50%);
    transform: rotate(45deg);
}

照理說直接切割應該能切出來，但我沒弄出來，都是直播的鍋，這裏我取了個巧，弄了個三個角取圓，一個角直角，最後旋轉的方法。
http://bennettfeely.com/clippy/ 附個clip-path生成器，雖然不能生成本文的水滴。

4.其實都能想到了，3裏面爲何不直接用border-radius生成圓角呢，兼容還好點，因而

.box1 {
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50% 50% 0; /*top;leftright;bottom*/
    transform: rotate(45deg);
   }

我也不是謙虛，其實我第一個想出來的方法就是這個，上面的就是想湊點字數，代碼簡介，易於理解，我網上找了下好像也沒人過這個，好頂贊~

總結：

想要一個形狀，咱們能夠遮，切，組合，旋轉，這麼多種方法，結合僞元素、動畫屬性，真是其樂無窮~
固然了能夠直接base64或者用圖片
http://pan.baidu.com/s/1dFlxtGP 上面demo放這了，順序不對請不要介意，話說有空得搞個demo頁了。

附：CSS生成雲朵

.demo {
     height: 50px;
     width: 50px;
     box-shadow: #eee 65px -15px 0 -5px, #eee 25px -25px, #eee 30px 10px, #eee 60px 15px 0 -10px, #eee 85px 5px 0 -5px;
     border-radius: 50%;
 }

自身是圓，生成自身的陰影再偏移，許多個陰影組合而出的雲。
能夠在http://www.vastskycc.com/404....這裏看到，啊，固然不是我寫的，哭~