利用css3的 transform-origin 画一颗爱心

首先是基础css(去除margin,padding),并且设置背景色.

*{margin:0;padding: 0;}
body{font-size: 12px;background:#886565;font-family: "微软雅黑";}

2:创建一个容器,里面就是放内容的

.heart{position:relative;width: 100px;height:80px;background:blue;margin: 100px auto;}

效果图如下:



接下来:

.heart:before{position: absolute;content: "";left:50px;top:0;width:50px;height: 80px;background: red;border-radius: 50px 50px 0 0;}

让红色部分以左下角为基点,逆时针旋转45度.加入下面代码:

transform-origin: left bottom;transform:rotate(-45deg);

接下来再画一个红色圆柱:

.heart:after{position: absolute;content: "";left:0;top:0;width:50px;height: 80px;background: red;border-radius: 50px 50px 0 0;}

效果图如下:



让第二个圆柱以右下角为基点,顺时针旋转45度,加入下面的代码:

transform-origin: right bottom;transform:rotate(45deg);

效果图如下:



哇哈哈,爱心已经出来了,现在把容器的背景色去掉: