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

Question

如何让心脏变小？当我在#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%;
    }

Answer 1

请务必了解 CSS 形状由 2 个看起来像子弹的层组成，只是旋转并并排放置以使其看起来像一颗心。添加到此的任何边框都将仅应用于元素符号而不是形状本身。如果你想在整个事物周围建立一个边界，你必须在它背后用另一颗心来伪造它。

我刚刚添加了这支笔来向您展示如何伪造各种边框并向您展示不同颜色的子弹形状:http://codepen.io/anon/pen/ydGHu

编辑:按照@Christoph http://codepen.io/anon/pen/eoxwr 的建议添加一个只用一个矩形覆盖额外边框的