如何更改CSS形状的大小+；添加边框？

如何使心脏变小？当我改变#heart（前几行）中的宽度/高度时，除了位置之外，没有什么真正的改变。有什么建议吗

另外，现在心脏是红色的。当我加上

        border-style:solid;
        border-width:5px;

心脏边界看起来很有趣。关于如何解决这个问题的建议

/*CSS for Heart*/
    #heart {
        position: relative;
        width: 100px;
        height: 90px;
    }
    #heart:before,
    #heart:after {
        position: absolute;
        content: "";
        left: 50px;
        top: 0;
        width: 50px;
        height: 80px;
        background: red;
        -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%;
    }
    #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%;
    }

---

我尝试通过改变以下内容使其变小：

left: 25px;
width: 25px;
height: 40px;

---

这里我有一个例子：

如果你想改变心脏的大小，你必须按比例重新计算该元素的所有相关属性，如宽度、高度、左侧、边界半径

---

该示例显示了一半大小的心脏：

重要的是要理解CSS形状由两层组成，这两层看起来像子弹，只是旋转并并排放置，使其看起来像心脏。任何添加到此的边框都将仅应用于项目符号，而不是形状本身。如果你想在整个事情上达成一个边界，你就必须用另一颗心来伪装它

我刚刚添加了这支笔，向您展示如何伪造各种边框，并向您展示不同颜色的子弹形状：

---

编辑：根据@Christoph的建议，添加一个只覆盖额外边框的矩形，我看不出心脏的外观有任何问题，但看看我小提琴中的注释，看看如何更改大小。我只能考虑在另一个心脏上制作两个稍有不同的心脏。：）或者您可以始终使用javascript画布。+1很好的解释和解决方案，虽然您不需要第二个形状，但覆盖不需要的边框的重叠正方形也足够了。很好的建议，我一开始没有想到，我添加了一支新笔来显示此解决方案。