如何使用CSS创建心形形状？

Question

我在SO上的答案之一中找到了以下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; 
    transform: rotate(-45deg); 
    transform-origin: 0 100%; 
} 

#heart:after { 
    left: 0; 
    transform: rotate(45deg); 
    transform-origin :100% 100%; 
}

<div id="heart"></div>

有人可以解释吗？

Answer 1

CSS3 Mon Amour-四步爱情Afair

使用CSS3创建心形的步骤：

1. 在您的DOM中创建一个块级元素，例如<div>，并为其分配id="heart"并应用CSS：

   #heart {
        position:relative; 
        width:100px; 
        height:90px;
        margin-top:10px; /* leave some space above */
   }
   

2. 现在使用伪元素#heart:before，我们创建一个带有一个圆角边缘的红色框，如下所示：

   #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 */ 
   }
   

   您的心现在应该看起来像这样：

   

3. 让我们通过添加以下内容对其进行一些轮换：

   #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%;
   }
   

   我们现在得到：

   << img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9rMXUyNC5qcGcifQ==” alt =“在此处输入图像描述”>

   已经开始聚集在一起：）。

4. 现在对于正确的部分，我们基本上只需要旋转相同的形状顺时针旋转45度，而不是逆时针旋转。 为了避免代码重复，我们附加了CSS#heart:before的值也改为#heart:after，然后应用更改位置和角度：

   #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%; 
   } 
   

   还有，瞧！完整的心形<div>：

   << img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8yUUZiVC5qcGcifQ==” alt =“在此处输入图像描述”>

   ] >>

不含任何前缀的代码段：

#heart {
  position: relative;
  width: 100px;
  height: 90px;
  margin-top: 10px;
}

#heart::before, #heart::after {
  content: "";
  position: absolute;
  top: 0;
  width: 52px;
  height: 80px;
  border-radius: 50px 50px 0 0;
  background: red;
}

#heart::before {
  left: 50px;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

#heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}
<div id="heart"></div>

Answer 2

这里是使用one