CSS打破了我的心？ [英] Did CSS break my heart?

问题描述

遵循此

这里是CSS，取自答案：

  #heart {
 position：relative; 
 width：100px; 
 height：90px; 
 margin-top：10px; 
 / *留一些空格* / 
} 
 
 #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％; 
} 
 
 #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％; 
} 
  

我错过了什么，或者爱情变老了）？

解决方案

我和你的JSfiddle搞砸了一下，我注意到你只画了一条心： （

这里是更新的CSS，将修复你的可怜的破碎的心

  #heart：before，#heart：after {
 position：absolute; 
 content：; 
 left：50px; 
 top：0; 
 width： 52px; 
 height：80px; 
 background：red; 
 / *分配一个好的红色* / 
 border-radius：50px 50px 0 0; 
 /让上边缘圆* / 
} 
  

这里是一个链接到工作的JSfiddle： a href =https://jsfiddle.net/arfc63Le/1/ =nofollow> https://jsfiddle.net/arfc63Le/1/

Following this question, I created a JSFiddle, but the output doesn't seem so good:

Here is the CSS, taken from the answer there:

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

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

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

Did I miss something, or that love got old (it's about 2 years old)?

解决方案

I was messing around a bit with your JSfiddle and I noticed that you were only drawing one side of your heart :(

Here's the updated CSS that will fix your poor broken heart

#heart:before, #heart:after {
 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 */
}

Here's a link to the working JSfiddle: https://jsfiddle.net/arfc63Le/1/

这篇关于CSS打破了我的心？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！