從一滴水說起，談?wù)凜SS形狀的生成思路

gotham 發(fā)布于2019-08-29 11:04 / 3497人閱讀

摘要：水是生命之源生產(chǎn)之要生態(tài)之基。興水利除水害事關(guān)人類生存社會(huì)進(jìn)步歷來是治國安邦的大事。附個(gè)生成器，雖然不能生成本文的水滴。

水是生命之源、生產(chǎn)之要、生態(tài)之基。興水利、除水害,事關(guān)人類生存、社會(huì)進(jìn)步,歷來是治國安邦的大事。巴拉巴拉~不扯淡了，

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

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

    .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%;
    }

簡單粗暴，一個(gè)圓加一個(gè)旋轉(zhuǎn)的方塊露出的三角，在這里還嘗試了下用translate來嘗試定位，雖然失敗了（不好定位，沒旋轉(zhuǎn)的時(shí)候很好用，且能使用基于自身的百分比值來定位，可方便的實(shí)現(xiàn)垂直居中）。

2.還有種思路，一個(gè)豎著的橢圓，把她的左下右下想把法去掉，然后就有了以下兩種嘗試

    .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%;
    }

再這里抱個(gè)歉，最終效果我沒調(diào)成，果然一邊看直播一邊寫demo就是沒效率，話說96B跑的真快啊
先拿一個(gè)圓，再拿一個(gè)豁了一個(gè)三角的長方形給擋住，差不多是這意思~

.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;
}

這個(gè)是上面的改進(jìn)版，直接對(duì)自身使用徑向漸變，把左右兩角設(shè)為透明，最終效果也沒調(diào)成，囧

3.順著上面的思路，自然想到了能直接對(duì)圓進(jìn)行切割的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);
}

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

4.其實(shí)都能想到了，3里面為什么不直接用border-radius生成圓角呢，兼容還好點(diǎn)，于是

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

我也不是謙虛，其實(shí)我第一個(gè)想出來的方法就是這個(gè)，上面的就是想湊點(diǎn)字?jǐn)?shù)，代碼簡介，易于理解，我網(wǎng)上找了下好像也沒人過這個(gè)，好頂贊~

總結(jié)：

想要一個(gè)形狀，我們可以遮，切，組合，旋轉(zhuǎn)，這么多種方法，結(jié)合偽元素、動(dòng)畫屬性，真是其樂無窮~
當(dāng)然了可以直接base64或者用圖片
http://pan.baidu.com/s/1dFlxtGP 上面demo放這了，順序不對(duì)請(qǐng)不要介意，話說有空得搞個(gè)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%;
 }

自身是圓，生成自身的陰影再偏移，許多個(gè)陰影組合而出的云。
可以在http://www.vastskycc.com/404....這里看到，啊，當(dāng)然不是我寫的，哭~