0

CSS3 で次のアイコンを作成して、「.circle」のみの幅と高さを変更できるようにしたい (または他のラッパー要素、ポイントは幅と高さを 1 か所で調整したい、またはそれを作成したい)幅と高さに関係なく、任意のコンテナーに自動的に収まります) 他の CSS3 プロパティを調整して、「A」が中央に並ぶようにする必要はありません。

これを行う最善の方法は何ですか？次のことを行うためのより良い方法をお勧めできる場合は、非常に高く評価されます。私が持っている問題は、「.circle」の幅と高さを小さく変更すると、他のすべての配置の配置に影響し、.circle2 のプロパティと .letter のプロパティを変更する必要があることです。

CSS

.circle {
    width: 100px;
    height: 100px;
    background: blue;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    cursor:pointer;
}

    .circle2 {
        width:80%;
        height:80%;
        border-radius: 50px;
        position:relative;
        top:5%;
        left:5%;
        border: 5px solid #FFF;
    }

letter{
    position:relative;
    top:45%;
    left:30%;
    margin:auto;
    cursor:pointer;
    color: #fff;
    font-size: 60px;
    font-weight: bold;
    display: inline-block;
    line-height: 0px;

}
letter:before {
     content: "A"
}

HTML

<div class="circle">
    <div class="circle2">
        <a class="letter"></a>
    </div>
</div>
4

1 に答える 1

1

見てください。注意が必要なのは、「A」のフォント サイズだけです。http://fittextjs.com/のようなライブラリを使用して、これを完全に実現できます。

http://jsfiddle.net/cSBw3/1/

コードは次のとおりです。

CSS3

.container {
    width: 100px;
    height: 100px;
    text-align: center;
}

.circle {
    width: 100%;
    height: 100%;
    background: blue;
    cursor:pointer;
    position: relative;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.circle:after {
    content:"";
    display: block;
    position: absolute;
    /* width: 80%; height: 80%; */
    top: 10%; bottom: 10%;
    left: 10%; right: 10%;
    border: 5px solid #FFF;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

.letter {
    cursor:pointer;
    display: block;
}
.letter:before {
    content: "A";
    display: block;
    position: absolute;
    bottom: 19%;
    right: 19%;
    font-size: 3em;
    font-weight: bold;
    color: #fff;
}

HTML

<div class="container">
    <div class="circle"> 
        <a class="letter"></a>
    </div>
</div>
于 2013-08-13T05:55:37.657 に答える