corner-right-shape
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
corner-right-shape は CSS のプロパティで、ボックスの右端の両方の角の border-radius 領域における形状を指定します。
全体的な角の形状の解説と複数の例については、corner-shape 一括指定プロパティページを参照してください。
構成要素のプロパティ
corner-right-shape プロパティは、以下の物理的プロパティの一括指定です。
構文
css
/* 単一のキーワード値で両方の角を設定 */
corner-right-shape: bevel;
corner-right-shape: notch;
/* 単一の superellipse() 値で両方の角を設定 */
corner-right-shape: superellipse(4);
corner-right-shape: superellipse(-0.9);
/* 上端の角、下端の角 */
corner-right-shape: bevel notch;
corner-right-shape: notch superellipse(-0.9);
/* グローバル値 */
corner-right-shape: inherit;
corner-right-shape: initial;
corner-right-shape: revert;
corner-right-shape: revert-layer;
corner-right-shape: unset;
値
corner-right-shape プロパティは 1 つまたは 2 つの <corner-shape-value> 値で指定します。
- 1 つの値が使用された場合、右端の両方の角の形状を指定します。
- 2 つの値が使用された場合、1 つ目は右上の角、2 つ目は右下の角の形状を指定します。
公式定義
DB に値が見つかりません！形式文法
corner-right-shape =
<'corner-top-left-shape'>{1,2}
<corner-top-left-shape> =
<corner-shape-value>
<corner-shape-value> =
round |
scoop |
bevel |
notch |
square |
squircle |
<superellipse()>
<superellipse()> =
superellipse( <number> |
infinity |
-infinity )
例
その他の関連する例は、corner-shape リファレンスページにあります。
基本的な corner-right-shape の使い方
HTML
この例のマークアップには、<div> 要素が 1 つあります。
html
<div></div>
CSS
ボックスにいくつかの基本的なスタイルを設定していますが、簡略化のため省略します。また、box-shadow と、border-radius を 20% 30% / 50% 40% に、corner-right-shape を square scoop に適用しています。
css
div {
box-shadow: 1px 1px 3px gray;
border-radius: 20% 30% / 50% 40%;
corner-right-shape: square scoop;
}
結果
表示結果は次のようになります。
仕様書
| Specification |
|---|
| CSS Borders and Box Decorations Module Level 4 # propdef-corner-right-shape |