一百元爱心折法教程用100元折爱心怎么折 _生活百科

怎么使用 CSS 绘制一个爱心【附爱心代码】分析：爱心可以通过一个正方形+两个圆形组合成。先画一个正方形+圆形, 摆放位置如下:

文章插图
文章插图
再添加上一个圆形。最后再将整个图形顺时针旋转45度即可。初步实现先画一个正方形：
& ltbody & gt& ltdiv id = & # 34心& # 34；& gt& lt/div & gt；& lt/body & gt；# heart { height:300 px；宽度:300px边框:2px纯黑；}在这个正方形的左边加一个圆。这里用伪类:before来实现:# heart { height:200 px；宽度:200px边框:2px纯黑；位置:相对；} #心:前{内容:& # 39；'；宽度:200px高度:200px边框:2px纯黑；边界半径:50%；//圆角的正方形变成圆位置:绝对；左:-100px；//向左移动正方形长度的一半}此时，图形看起来是这样的:
再添加一个圆形, 这里使用after伪类来实现。
【一百元爱心折法教程用100元折爱心怎么折】 #heart{ height: 200px; width: 200px; border: 2px solid black; position: relative; } // 这里偷个懒.直接写一块了 #heart:before,#heart:after{ content: ''; width: 200px; height: 200px; border: 2px solid black; border-radius: 50%; position: absolute; left: -100px; } // 第二个圆, 只需要向上位移正方形一半的高度 #heart:after{ left: 0; top: -100px; }

一百元爱心折法教程 用100元折爱心怎么折

一百元爱心折法教程用100元折爱心怎么折