來自網易雲的黑科技,帶尖角的div

2022-02-13 06:43:39 字數 1047 閱讀 8063

今天在網易雲的網頁版聽歌,話說steve vai的曲子永遠是這麼讓人揣摩不透,不過我還時更喜歡老joe,咦,跑題了···

border-top: 400px solid red;

border-right: 400px solid transparent;

border-bottom: 400px solid transparent;

border-left: 400px solid transparent;

下面要講的是網易雲上面的黑科技,我看完真的是服···

作為乙個程式猿,看網頁總喜歡手賤的審查元素...

咦?這兩個小黑塊是啥?稍微一想,原來是這樣....

頂層的小方塊顏色是白色背景顏色,下面還層疊了乙個背景顏色為邊框顏色的小方塊,還是上圖比較直觀:

這裡有兩個小方塊,我們兩個小方塊都position:absolute;把右邊的小方塊向左移,移到馬上覆蓋左邊方塊為止:

ok,就像這個樣子,聰明的你可能已經知道這個是什麼了,假定背景顏色是白色的,邊框是紅色的,那我們只需要改變著兩個元素的color屬性即可:

我們只需給父元素position:relative;把這兩個小方塊定位到相應的地方就ok啦,感覺能想到這種方法的人也挺牛的,啊哈。

CSS 的黑科技

補充篇在這裡 昨天由於某些原因沒有寫部落格,之前說好的每天一篇的,這篇是為了補昨天的了。然後我就要當一次標題黨了。這裡的黑科技其實就是一些css中不怎麼為人所知但在解決某些問題的時候很溜的屬性。很多開發者估計都沒有正確認識這個border radius,因為基本上很多人都是這麼用的 box 稍微高階...

CSS 的黑科技

補充篇在這裡 昨天由於某些原因沒有寫部落格,之前說好的每天一篇的,這篇是為了補昨天的了。然後我就要當一次標題黨了。這裡的黑科技其實就是一些css中不怎麼為人所知但在解決某些問題的時候很溜的屬性。很多開發者估計都沒有正確認識這個border radius,因為基本上很多人都是這麼用的 box稍微高階一...

ZStack黑科技之雲平台備份與恢復

從2015年成立至今,小z在雲計算行業已摸爬滾打了兩年。期間,小z一直兢兢業業,致力為大家提供更優秀的雲計算平台。在業內的口碑也一直都是槓槓的。今天咱們來看看zstack的亮點之一 被使用者親切的成為 吊炸天 的黑科技 雲平台備份恢復能力 這個絕對不是 托兒 只要你做了資料庫備份,儲存還在 啥都不用...