使用CSS获取心形边框？

我有这样的代码，用于创建一个彩色心脏（其中有一个蓝色的背景），并使用CSS消色心脏（白色与蓝色边框有色）：使用CSS获取心形边框？

#favourite_user { 
    position: relative; 
    width: 25px; 
    height: 22.5px; 
    margin: 30px; 
    cursor:pointer; 
} 
#favourite_user.favourited:before,#favourite_user.favourited:after { 
    background: #3498db; 
} 
#favourite_user.unfavourited:before,#favourite_user.unfavourited:after { 
    background: #fff !important; 
    border: 1px solid #3498db; 
} 
#favourite_user:before, 
#favourite_user:after { 
    position: absolute; 
    content: ""; 
    left: 12.5px; 
    top: 0; 
    width: 12.5px; 
    height: 20px; 
    -moz-border-radius: 50px 50px 0 0; 
    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%; 
} 
#favourite_user:after { 
    left: 0; 
    border-left:0px !important; 
    -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%; 
}

在点击我正在切换类心脏.favourited和.unfavourited，其中一个具有蓝色背景，而另一个具有白色背景的蓝色边框。但我无法做到这一点，使用伪元素:before和:after这个边框的一部分不会很好。

这里是Fiddle

关于解决任何指针将不胜感激...在此先感谢...

来源

2014-07-01 Aditya

看来，这只是一个小的调整问题，比如，你可以通过改变固定左下方'左：12.5px ;''left：13.5px;' – Banana

看看[CSS3shapes]（http://www.css3shapes.com/#heart）。 – Vucko

另外，请记住，如果您制作1px边框，则需要在调整宽度时考虑此问题，因为您需要将心脏宽度扩大1px – Banana

尝试使用字体真棒LINK

您可以使用“fa-heart-o”而不是使用这么多代码

HTML：

<i class="fa fa-heart-o"></i>

来源

2014-07-01 12:29:39

通常我不喜欢图标字体，但在这种情况下...这是一个好主意。更多，更多的自由。 –

@Kiran：谢谢你，这看起来是个不错的选择 – Aditya

你可以试试这个：

您还可以使用字体真棒为和颜色变化也可作为字体颜色

Fontawesome：http://fortawesome.github.io/Font-Awesome/icon/heart/

Demo

#favourite_user:after { 
border:solid 1px #fff; 
position: absolute; 
content: ""; 
left: 12.5px; 
top: 0; 
width: 12.5px; 
height: 20px; 
-moz-border-radius: 50px 50px 0 0; 
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%; 
}

来源

2014-07-01 12:32:06

要删除左下方的神器，您需要添加

#favourite_user:after { 
    border-bottom:0px !important; /* ADDED */

Running demo

还需要一个!importantshould be avoided，因为它迫使每个浏览器引擎创立它在规则的时间所有的规则重新计算;

相反，您可以将规则的CSS specificity设置得更高，以便在应用时给予它们正确的重要性。

来源

2014-07-01 14:55:24

谢谢，你是对的'重要'应该避免，但是在心脏的弯曲部分（左上角）有一些问题，你知道如何可以处理？ – Aditya

您可以使用类似：

$('div').click(function() { 
 
    $(this).toggleClass("active"); 
 

 
});

div { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: tomato; 
 
    position: relative; 
 
    margin: 100px auto; 
 
    border-bottom: 5px solid black; 
 
    border-right: 5px solid black; 
 
    transform: rotate(45deg); 
 
} 
 
div:before, 
 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    border-radius: 50%; 
 
    background: tomato; 
 
    border: 5px solid transparent; 
 
    transform: rotate(-45deg); 
 
    z-index: -2; 
 
} 
 
div:before { 
 
    top: -5px; 
 
    left: calc(-50% - 5px); 
 
    border-top-color: black; 
 
    border-left-color: black; 
 
} 
 
div:after { 
 
    top: calc(-50% - 5px); 
 
    left: -5px; 
 
    border-top-color: black; 
 
    border-right-color: black; 
 
} 
 
.active { 
 
    border-color: blue; 
 
    background: transparent; 
 
} 
 
.active:before { 
 
    border-top-color: blue; 
 
    border-left-color: blue; 
 
    background: transparent; 
 
} 
 
.active:after { 
 
    border-top-color: blue; 
 
    border-right-color: blue; 
 
    background: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div></div>

来源

2015-05-06 11:31:42 jbutler483

使用CSS获取心形边框？

回答

相关问题