html – 如何创建CSS心脏？ 为什么这个CSS创造一个心脏的形状？

概述我在这里的一个答案中找到了以下CSS,我想知道为什么它创建了所需的心脏形状： #heart { position: relative; width: 100px; height: 90px; } #heart:before, #heart:after { position: absolute; 我在这里的一个答案中找到了以下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>：

总结

以上是内存溢出为你收集整理的html – 如何创建CSS心脏？ /为什么这个CSS创造一个心脏的形状？全部内容，希望文章能够帮你解决html – 如何创建CSS心脏？ /为什么这个CSS创造一个心脏的形状？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。