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的建议添加一个只覆盖额外边框的矩形

Answer 2

我试图通过更改：

来缩小它

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

我在这里有一个例子：http://jsfiddle.net/dVLUb/

Answer 3

如果您想更改心脏的大小，则必须按比例重新计算此元素的所有相关属性，例如width , height, left , border-radius。

该示例显示了半个大小的心脏：JSFiddle Example

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

3 个答案: