HTML和CSS------太极图

一、用HTML和CSS制作太极图

       

思路 :

1、画出两个长方形

2、把两个长方形,拼成一个正方形

3、把拼成的正方形放到一个与之匹配的正方形中

4、把正方形的边角,锐化成圆

5、把左边‘长方形’背景设为白色,把边‘右长方形’背景设为黑色,

6、取‘长方形’宽为直径画圆,并把圆背景设为白色放到正方形的对称轴上,圆的上边与正方形的上边相切

7、取‘长方形’宽为直径画圆,并把圆背景设为黑色放到正方形的对称轴上,圆的上边与正方形的下边相切

8、取两个小圆,一黑一白,补全太极图

二、代码展示




    
    
    
    太极图
    



三、效果图展示

HTML和CSS------太极图_第1张图片

你可能感兴趣的:(html,前端,java)