我在这里的一个答案中找到了以下CSS,我想知道为什么它创建了所需的心脏形状：
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
请问有人可以解释一下吗
解决方法
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>：
