CSS の clip-path プロパティの使用方法の詳細な説明

CSS の clip-path プロパティの使用方法の詳細な説明

クリップパスの使用

ポリゴン

  • 値は複数の座標点で構成されます。最初の値は x 方向、2 番目の値は y 方向です。
  • 左上隅が原点、右下隅が点(100%、100%)です。 </p>
体 {
  背景色: #000;
}

.fa {
  境界線: 1px 実線 #fff;
  色:黄緑;
  パディング: 10px;
  マージン: 10px;
}

.fa>div {
  幅: 110ピクセル;
  高さ: 110px;
  背景色: 黄緑;
  マージン: 20px 自動;
}

.ポリゴン1 {
  クリップパス: ポリゴン(50% 0px, 100% 100%, 0px 100%)
}

.ポリゴン2 {
  クリップパス: ポリゴン(0px 50%, 50% 0, 100% 50%, 50% 100%)
}

.ポリゴン3 {
  クリップパス: ポリゴン(0% 60%, 20% 0%, 60% 0%, 40% 60%)
}
<div class="fa">
  <p>ポリゴン</p>
  <p>値は複数の座標点で構成されます。最初の値は x 方向、2 番目の値は y 方向です。 </p>
  <p>左上隅が原点、右下隅が点(100%、100%)です。 </p>
  <div class="polygon1"></div>
  <div class="polygon2"></div>
  <div class="polygon3"></div>
</div> 

  • 値は座標点と半径で構成されます。
  • 左上隅が原点、右下隅が点(100%、100%)です。
  • 半径を定義するときは、at キーワードを使用して座標を定義できます。
体 {
  背景色: #000;
}

.fa {
  境界線: 1px 実線 #fff;
  色:黄緑;
  パディング: 10px;
  マージン: 10px;
}

.fa>div {
  幅: 110ピクセル;
  高さ: 110px;
  背景色: 黄緑;
  マージン: 20px 自動;
}

.circle1 {
  クリップパス: 円(50% 50% で 50%)
}

.circle2 {
  クリップパス: 円(70% 50% 50%)
}

.circle3 {
  クリップパス: 円(30% 10% 10%)
}
<div class="fa">
  <p>円</p>
  <p>値は座標点と半径で構成されます。 </p>
  <p>左上隅が原点、右下隅が点(100%、100%)です。 </p>
  <p>半径を定義するときは、at キーワードを使用して座標を定義できます。 </p>
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
</div> 

楕円

  • 値は、楕円の X 軸の半径、Y 軸の半径、および配置楕円の座標で構成されます。
  • 左上隅が原点、右下隅が点(100%、100%)です。
  • at キーワードは半径と座標を区別します。
体 {
  背景色: #000;
}

.fa {
  境界線: 1px 実線 #fff;
  色:黄緑;
  パディング: 10px;
  マージン: 10px;
}

.fa>div {
  幅: 110ピクセル;
  高さ: 110px;
  背景色: 黄緑;
  マージン: 20px 自動;
}

.楕円1 {
  クリップパス: 楕円(30% 20% 50% 50%)
}

.楕円2 {
  クリップパス: 楕円(20% 30% 50% 50%)
}

.楕円3 {
  クリップパス: 楕円(60% 10% で 10% 10%)
}
<div class="fa">
  <p>楕円</p>
  <p>値は、楕円の X 軸の半径、Y 軸の半径、および配置楕円の座標で構成されます。 </p>
  <p>左上隅が原点、右下隅が点(100%、100%)です。 </p>
  <p>at キーワードは半径と座標を区切ります</p>
  <div class="ellipse1"></div>
  <div class="ellipse2"></div>
  <div class="ellipse3"></div>
</div>

インセット

値は(右上、左下、丸、左上、半径、右上、半径、右下、半径、左下、半径)です。

丸め前の値は距離を表します。最初の値が 25% の場合、画像は上から 25% から描画されることを意味します。

体 {
  背景色: #000;
}

.fa {
  境界線: 1px 実線 #fff;
  色:黄緑;
  パディング: 10px;
  マージン: 10px;
}

.fa>div {
  幅: 110ピクセル;
  高さ: 110px;
  背景色: 黄緑;
  マージン: 20px 自動;
}

.インセット1 {
  クリップパス: インセット(25% 0% 25% 0% 丸め 0% 25% 0% 25%)
}

.インセット2 {
  クリップパス: インセット(0% 25% 25% 0% 丸め 25% 25% 25% 0%)
}

.インセット3 {
  クリップパス: インセット(25% 25% 0% 0% 丸め 0% 25% 0% 25%)
}
<div class="fa">
  <p>インセット</p>
  <p>値は (右上、左下、丸、左上、半径、右上、半径、右下、半径、左下、半径) です。</p>
  <p>round の前の値は距離を表します。最初の値が 25% の場合、画像は上から 25% の位置から描画されることを意味します</p>
  <div class="inset1"></div>
  <div class="inset2"></div>
  <div class="inset3"></div>
</div> 

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQLでカーソルトリガーを使用する方法

>>:  ウェブページでコンテンツを引用するためによく使われるHTMLタグをマスターする

推薦する

XHTML CSSを使用して正式なブログを書く

ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...

MySQL チュートリアル: サブクエリの例の詳細な説明

目次1. サブクエリとは何ですか? 2. サブクエリはどこに表示されますか? 3. Whereサブク...

Nodejs-cluster モジュールの知識ポイントの概要と使用例

面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...

uniapp プロジェクトで MQTT を使用する方法

目次1. uniappプラグインマーケットのリファレンスプラグイン2. 具体的な導入プロセス1. m...

HTML フォームタグチュートリアル (4):

ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...

Vue でのルーティングガードの具体的な使用法

目次1. グローバルガード1.1 グローバルフロントガード1.2 グローバルポストルートガード1.3...

MySQL 5.7 共通データ型

——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...

マージントップ崩壊現象とその具体的解決策

マージントップの崩壊とはmargin-top の崩壊は、CSS ボックス モデルで発生する現象です。...

ウェブデザインにおけるキーワード設計手法の紹介

多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...

CSSを使用してAndroidシステムの読み込みアニメーションを実装する

Web には一般的な読み込みアイコンが 2 つあります。1 つは iOS の「菊」、もう 1 つは ...

Vue で HTML 5 ドラッグ アンド ドロップ API を使用する方法

ドラッグ アンド ドロップ API は、ドラッグ可能な要素を HTML に追加し、ドラッグ可能な豊富...

MySQL 8.0.16 winx64 のインストールと設定方法のグラフィックチュートリアル (win10 の場合)

この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...

Debian システムでの自動パッケージ更新の問題を解決する方法

いつから始まったのかはわかりませんが、コンピュータの電源を入れてインターネットに接続するたびに、デー...