Creating Irregular Circle in CSS

Makzan
·
·
IPFS
·
The fun part is that when we apply different values to four corners, we can create irregular circles.

Transcript

Hey there, this is Thomas from Macao.

In this video, I would like to talk about creating irregular circles by using CSS border-radius.

There are 4 corners for the border-radius, they are top left, top right, bottom right and bottom left.

We can define a unified value to all 4 corners. For instance, when we have a square element and apply all the values to be 50% or larger, we have a circle.

The fun part is that when we apply different values to four corners, we can create irregular circles.

And by using transition, transform, pseudo-elements, we can create fun irregular circular elements.

border-radius code snippet



CC BY-NC-ND 2.0 授权

喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!

logbook icon
Makzan我管理世界職業技能競賽之網站技術項目、舉辦本地設計與開發賽事、開課分享技術心得。一個用網頁來表達自己的作家。
  • 来自作者
  • 相关推荐

期望與放下

甚麼是世界職業技能競賽

【最後兩天】買《所謂「我不投資」,就是 all in 在法定貨幣》親身體驗擁有 NFT