從一滴水說起，談談CSS形狀的生成思路

gotham 發布于2019-08-29 11:04 / 3438人閱讀

摘要：水是生命之源生產之要生態之基。興水利除水害事關人類生存社會進步歷來是治國安邦的大事。附個生成器，雖然不能生成本文的水滴。

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

來看看下面這張圖，額，為了扣題，就管她叫水滴吧（雖然是倒的），從這開始，讓我們用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....這里看到，啊，當然不是我寫的，哭~

云服務器 GPU云服務器談談對php的理解 php五角星的形狀不規則形狀的圖像識別一滴水

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111401.html

CSS 火焰？不在話下

摘要：下圖是我鼓搗到另外一個小，當到元素的時候，產生火焰效果嗯，這些其實都是對濾鏡及混合模式的一些搭配運用。主要幾個屬性默認大家已經掌握了大概，閱讀后可以自行去了解補充更多細節更多精彩技術文章匯總在我的，持續更新，歡迎點個訂閱收藏。正文從下面開始。今天的小技巧是使用純 CSS 生成火焰，逼真一點的火焰。嗯，長什么樣子？在 CodePen 上輸入關鍵字?CSS Fire，能找到這樣的：或者...

Cciradih 2019-04-23 11:43 評論0 收藏0
CSS 火焰？不在話下

摘要：今天的小技巧是使用純生成火焰，逼真一點的火焰。如上圖，整個蠟燭的骨架，除去火焰的部分很簡單，掠過不講。利用上述，我們要先生成一個類似火焰形狀的三角形。正文從下面開始。今天的小技巧是使用純 CSS 生成火焰，逼真一點的火焰。嗯，長什么樣子？在 CodePen 上輸入關鍵字 CSS Fire，能找到這樣的： showImg(https://segmentfault.com/img/...

olle 2019-08-30 15:43 評論0 收藏0
前端特效【第04期】|果汁混合效果-下

摘要：往期回顧在上一期的前端特效里，我們已經把果汁混合的效果里面的圓形菜單做好了，如果你錯過了上篇文章今天我們要討論的是杯子里面的液體生成問題先來回顧下咱們的果汁混合效果吧果汁混合效果，掃描下方二維碼就看到啦我們接著上期的內容來繼續往下講吧，本期往期回顧在上一期的【前端特效】?里，我們已經把果汁混合的效果里面的圓形菜單做好了，如果你錯過了上篇文章今天我們要討論的是杯子里面的液體生成問題 ...

宋華 2019-08-26 12:22 評論0 收藏0
position 的屬性值

摘要：注意當該固定元素的祖先元素的屬性非時，容器由瀏覽器窗口改為該祖先元素粘性定位，相當于相對定位和固定定位的混合。粘性定位根據一個閾值決定，在大于等于閾值時采用相對定位，小于閾值后則為固定定位。理論上來說，全部 position 的取值有8個包括：position：static | relative | absolute | fixed | sticky | initial | inherit...

番茄西紅柿 2019-04-23 13:30 評論0 收藏0
直面程序人生，始于當下，奔赴未來！

摘要：時至今日，已過而立之年的程序猿一枚，隨便寫寫，把握一下方向，以致于不被物欲橫流所侵，世俗生活所擾。慘遭蹂躪的三哥迫于無奈，只得重操舊業，繼續干起來程序猿的買賣。 ????????時至今日，已過而立之年的程序猿一枚，隨便寫寫，把握一下方向，以致于不被物欲橫流所侵，世俗生活所擾。初識此行 ??...

codecook 2021-09-26 09:55 評論0 收藏0