0

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

3 回答 3

1

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

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

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

于 2013-11-12T15:45:43.567 回答
0

如果你想改变心脏的大小，你必须重新计算所有相关属性，比如width , height, left , border-radius这个元素的比例。

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

于 2013-11-12T15:43:07.460 回答
0

我试图通过更改使其更小：

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


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

于 2013-11-12T15:38:36.013 回答