CSS画心形的三种方法,超级简单(二)https://developer.aliyun.com/article/1385356
全部代码如下,拿去跟女朋友表白吧
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { position: relative; top: 100px; left: 50%; width: 100px; height: 100px; background-color: tomato; } div:before { content: ""; position: absolute; top: -50px; left: 0; width: 100px; height: 100px; border-radius: 50%; background-color: blue; } div:after { content: ""; position: absolute; top: 0px; left: 50px; width: 100px; height: 100px; background-color: yellow; border-radius: 50%; } div:before { background-color: tomato; } div:after { background-color: tomato; } div { position: relative; top: 100px; left: 50%; width: 100px; height: 100px; background-color: tomato; transform: rotate(-45deg); } </style> </head> <body> <div></div> </body> </html>
二、一颗心不够表达我的心意,那么就给她画出一屏幕的心
浮动让它们填满整个屏幕
两个伪元素代表我的左心房和右心房
让左右心房都旋转45度,就形成了我满满的一屏幕心
三、“以前我看事物,是用肉眼去看,但是在我死去的那一刹那,我开始用心眼去看这个世界,所有的事物,真的可以看得前所未有的那么清楚。” —周星驰
像素级的世界可以由box-shadow属性实现