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

変更して小さくしようとしました：

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


ここに例があります：http://jsfiddle.net/dVLUb/

于 2013-11-12T15:38:36.013 に答える