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

2021-09-19 03:01:40 字數 1199 閱讀 5648

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

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

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

.box1 

.box1::after

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

2.還有種思路,乙個豎著的橢圓,把她的左下右下想把法去掉,然後就有了以下兩種嘗試

.box2 

.box2::after

再這裡抱個歉,最終效果我沒調成,果然一邊看直播一邊寫demo就是沒效率,話說96b跑的真快啊

先拿乙個圓,再拿乙個豁了乙個三角的長方形給擋住,差不多是這意思~

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

3.順著上面的思路,自然想到了能直接對圓進行切割的clip-path屬性雖然相容堪憂

.box4
照理說直接切割應該能切出來,但我沒弄出來,都是直播的鍋,這裡我取了個巧,弄了個三個角取圓,乙個角直角,最後旋轉的方法。

附個clip-path生成器,雖然不能生成本文的水滴。

4.其實都能想到了,3裡面為什麼不直接用border-radius生成圓角呢,相容還好點,於是

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

想要乙個形狀,我們可以遮,切,組合,旋轉,這麼多種方法,結合偽元素、動畫屬性,真是其樂無窮~

當然了可以直接base64或者用

上面demo放這了,順序不對請不要介意,話說有空得搞個demo頁了。

附:css生成雲朵

.demo
自身是圓,生成自身的陰影再偏移,許多個陰影組合而出的雲。

可以在這裡看到,啊,當然不是我寫的,哭~

平行宇宙中的一滴水

先引用一段 山爺取出了乙個平時盛水的陶碟,陶碟裡裝的卻是火麻籽榨出的油,然後將一根草莖一半浸入油中 另一半伸出碟沿外。這種草莖的內部纖維很密實萱軟 吸水性非常好,能將火麻油都吸透其中。然後山爺取出燧石以火麻絲引火,點燃了草莖。草莖並沒有迅速地燃燒,頂端公升起了一朵火苗,昏暗的光線將整個石屋中的東西都...

一滴水推醒了英雄的春天

一滴水推醒了英雄的春天 手持一劍陽光而立 那是英雄的孤寂 青草醒來 埋沒了馬蹄 柔情的風 拂起青笛 佇立不動的風景 缺少什麼 這無法溶解的冰凍啊 陽光已上鋒芒 誰的傷手悄悄推入劍鞘 一陣二月的剪刀 亂語之下 青春變薄 變淡 漸漸露出稜角 沉默地與沉默的角逐中 迸裂的黑光 將黑夜在一寸之距的對望中 拉...

「一滴水」和「大海」(再談年輕人擇業的困擾)

現在很多的年輕人面對自己的工作總有這樣那樣的想法,感覺自己的在這了做到底值不值得?或者說在這裡到底能做多久?或者說在這裡做到底有多大前途?大家迷茫的根源就是 我現在從事的這個行業是不是很有前景的?因為他們的理論是如果這個行業的 前景 不好的話,那麼他們在這個行業就算再出色也不會有什麼 錢景 這證明現...