web-dev-qa-db-ja.com

幅または高さを設定せずに境界線半径を使用したカプセル形状？

幅または高さを設定せずに境界線半径を使用してカプセル形状を作成することは可能ですか？

カプセルが水平方向の長さに沿って真っ直ぐなまま、左右を完全に丸くしたいです。半径を50％に設定しても、望ましい効果が得られないようです。

Capsule Shape

csscss3css-shapes
47
christian

非常に大きな境界半径を適用することは、Davidのフィドルのこのmodのような多くのブラウザー（IE9 +、FF、Chrome）で機能するようです http://jsfiddle.net/cthQW/1/

border-radius: 500px;
84
Jeremy Cook

はい、これは可能です（ただし、Chromium 28/Ubuntu 12.10でしかテストしていませんが）。

div {
    /* this is the only relevant part: */
    border-radius: 20%/50%;

    /* this is irrelevant, and just so the element can be visualised/displayed: */
    width: 50%;
    height: 5em;
    margin: 2em auto;
    background-color: #000;
}

JS Fiddle demo 。

重要な情報は、明らかに、20%/50%プロパティ値; 20%は半径の「水平方向の長さ」ですが、50%は「垂直長」です。 2つの異なる測定値を使用すると、単一の測定値ではなく、より円形の半径をもたらす楕円曲線が境界に与えられます。明らかに、これはあなた自身の要件にある程度の調整を必要とします

参照：

16
David Thomas

これは私がうまくいくことがわかったものです：

_border-radius: 50vh;_

ブラウザのサポートも、今ではそれで良さそうです。

説明すると、vhは、ビューポートの高さをピクセル単位で計算する「ビューポートユニット」です。 _50vh_と言って境界の半径を宣言すると、50% * (Viewport Height)pxになります。

3
Nathan Powell

パーセンテージを使用する場合、要素の幅を使用して半径を計算します。カプセル型の要素を使用するには、remまたはpxなどのborder-radiusプロパティ単位に渡す必要があります（この理由はわかりませんが、作品）。これが500pxを渡すときに機能する理由です。必要に応じて、line-heightプロパティとborder-radiusプロパティに同じ値を使用できます。

.capsule {
    line-height: 48px;
    border-radius: 48px;
}

ここに CodePen の例があります。変数$label-heightを変更して、ボタンの高さが変わっても形状がどのように維持されるかを確認してください。

この例では、要素の幅または高さを設定する必要はありません。コンテンツのheightとpaddingを調整するだけです。

Paddingプロパティは、コンテンツとコンポーネントの境界線の間隔を設定するのに役立ちます。左パディングのみを設定した場合の外観を確認してください。

enter image description here

コンテナのline-heightプロパティを設定すると、コンテナの高さが自動的に設定され、同時にコンテナ内のコンテンツが中央に配置されます。

コンポーネントの幅をコンポーネントのコンテンツの幅に設定する場合、コンポーネントの表示プロパティをinline-blockに設定し、FlexBoxを使用して列に配置することができます。次に、左と右のマージンをautoに設定して、要素が親の幅まで大きくならないようにします。

enter image description here

また、コンポーネント間にスペースを残したい場合は、連続するコンポーネント間にmargin-topプロパティを設定できます。

.capsule + .capsule {
    margin-top: 15px;
}

それが役に立てば幸い ：）

1
Timbergus