CSS3 Mon Amour – A 4 Step Love Afair

使用CSS3创建心脏形状有几个步骤：

>创建块级元素,例如< div>在DOM中并将其分配给id =“heart”并应用CSS：

#heart {

position:relative;

width:100px;

height:90px;

margin-top:10px; /* leave some space above */

}

>现在使用伪元素#heart：在我们创建一个带有这样一个圆角的红色框之前：

#heart:before {

position: absolute;

content: "";

left: 50px;

top: 0;

width: 52px;

height: 80px;

background: red; /* assign a nice red color */

border-radius: 50px 50px 0 0; /* make the top edge round */

}

你的心脏现在应该是这样的：

>让我们通过添加一点轮换：

#heart:before {

-webkit-transform: rotate(-45deg); /* 45 degrees rotation counter clockwise */

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%; /* Rotate it around the bottom-left corner */

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

我们现在得到：

已经开始聚在一起:)

>现在对于正确的部分,我们基本上只需要旋转相同的形状

顺时针45度,而不是逆时针方向.为了避免代码重复,我们附加了css

的#heart：之前也是#heart：之后,然后应用更改

在位置和角度：

#heart:after {

left: 0; /* placing the right part properly */

-webkit-transform: rotate(45deg); /* rotating 45 degrees clockwise */

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%; /* rotation is around bottom-right corner this time */

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

和voilà！完整的心形< div>：