| 纯 css 描述太极图

前言

不久前有一次面试,面试官考察我基本功和开放性思维,当时说了思路。今天得空,实现了一把。最终成品如图:


分析

将目标拆解为 7 个 div,使用绝对定位思路:

  • 【width = 400; height = 400; border = 1】 大圆
  • 【radius = 200】 左半圆 border实现
  • 【radius = 200】 右半圆 border实现
  • 【radius = 100】 上半圆 border实现
  • 【radius = 100】 下半圆 border实现
  • 【radius = 25】 上小圆
  • 【radius = 25】 下小圆

代码:




    
    太极
    


(完)

你可能感兴趣的:(| 纯 css 描述太极图)