Question

我们正在尝试使用心形图css按钮替换添加到收藏夹按钮，例如在FAB.com上

创建心形css的代码是

这个cs

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Creating Heart using CSS3 </title> 
    <style type="text/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%; 
     } 
  </style> 
</head>

HTML：

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

现在让它成为可能的地方，如果这个人已经成为一个喜欢它保持红色，但没有翻转它只是心脏周围的红色边框。

Answer 1

我不是css专家，但这是我的想法：

同时使用：

.heart and .heartwhite

工作示例： http://jsfiddle.net/nwznn/

但如果你问我，我会坚持图像

如何使用翻转效果创建一个心形状按钮，以替换添加到opencart主题中的收藏夹

1 个答案: