如何创建CSS心？ /为什么这个CSS创造一个心的形状？ [英] How to create CSS heart? / Why is this CSS creating a heart shape?

问题描述

我发现下面的CSS中的一个答案在这里的SO，我想知道为什么它创建所需的心形状：

  #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：rotation（-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创建心形的步骤如下：

1. 创建一个块级元素，例如< div> ，并指派 id =heart并套用CSS：

     #heart {
    position：relative; 
    width：100px; 
    height：90px; 
    margin-top：10px; / *留一些空格* / 
   } 
     




2. #heart：before 之前，我们创建一个带有一个圆角边框的红色框，如下所示：

     #heart：before {
    position：absolute; 
    content：; 
    left：50px; 
    top：0; 
    width：52px; 
    height：80px; 
    background：red; / *指定一个漂亮的红色* / 
    border-radius：50px 50px 0 0; / *让顶边圆* / 
   } 
     

   你的心现在应该像这样：

   
   
   

   >

   
   
   

    ＃
    heart：before {
    -webkit-transform：rotate（-45deg）; / * 45度逆时针旋转* / 
    -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％; 
   } 
     

   现在我们得到：

   
   
   

   >

   
   
   




3. 现在对于右边部分，我们基本上需要相同的形状，只旋转
   顺时针旋转45度，而不是逆时针旋转。 为了避免代码重复，我们将 #heart：之前的css
   附加到 #heart：after ，然后在位置和角度应用更改
   ：

     #heart：after {
    left：0; / *正确放置正确的部分* / 
    -webkit-transform：rotate（45deg）; / *顺时针旋转45度* / 
    -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％; 
   } 
     

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

   
   
   

I've found the following CSS in one of the answers here on SO and I was wondering why does it create the desired heart shape:

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

Please can someone explain?

解决方案

CSS3 Mon Amour - A 4 Step Love Afair

There are a few steps for creating heart shape using CSS3:

1. Create a block-level element such as a <div> in your DOM and assign it with id="heart" and apply CSS:

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

2. Now using pseudo-element #heart:before we create a red box with one rounded edge like this:

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

   Your heart should now look like this:

3. Let us assign a little rotation to that by adding:

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

   And we now get:

   Already starting to come together :).

4. Now for the right part we basically need the same shape only rotated 45 degrees clockwise instead of counter clockwise. To avoid code duplication we attach the css of #heart:before also to #heart:after, and then apply the change in position and in angle:

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

   And voilà! a complete heart shaped <div>:

这篇关于如何创建CSS心？ /为什么这个CSS创造一个心的形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！