html怎么做一个心形边框,使用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这个边框的一部分不会很好。

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

2014-07-01

Aditya

+0

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

+3

看看[CSS3shapes](http://www.css3shapes.com/#heart)。 –

+0

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