css画出桃心(爱心)

时间：7年前阅读：5054

思路：创建一个方形div，分别用css控制div的两个伪元素平移到正方形相邻两边，圆形与边中点重合。最后将总的div旋转45度

例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
div{
    display:inline-block;
    margin:50px;
    height: 100px;
    width: 100px;
    background-color: red;
    transform: rotate(-45deg);
}
div:before,div:after{
    display:block;
    content:"";
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
    margin-top:-50%;
}
div:after{
    margin-left:50%;
}
</style>
		</style>
	</head>
	<body>
<div></div>
	</body>
</html>

效果：

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css画出桃心(爱心)

网友评论