クリップパスの使用 ポリゴン
体 { 背景色: #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> 丸
体 { 背景色: #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> 楕円
体 { 背景色: #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 を応援していただければ幸いです。 |
>>: ウェブページでコンテンツを引用するためによく使われるHTMLタグをマスターする
ブログの正式名称は「Web log」で、中国語で「ネットワークログ」を意味します。後にブログに短縮さ...
目次1. サブクエリとは何ですか? 2. サブクエリはどこに表示されますか? 3. Whereサブク...
面接官から「NodeJS で複数のプロセスを開始する方法を教えてください」と尋ねられることがあります...
目次1. uniappプラグインマーケットのリファレンスプラグイン2. 具体的な導入プロセス1. m...
ここで、次のような項目をフォームに追加したいとします: 現在いる都市を参照します。ここで私たちが話し...
目次1. グローバルガード1.1 グローバルフロントガード1.2 グローバルポストルートガード1.3...
一つの環境Alibaba Cloud Server: CentOS 7.4 64 ビット (RedH...
Dockerのインストール カール -fsSL https://get.docker.com -o...
——「MySQL in Simple Terms (第 2 版)」からのメモ数値型整数型バイト最小最...
マージントップの崩壊とはmargin-top の崩壊は、CSS ボックス モデルで発生する現象です。...
多くの場合、ホームページを作成するときに、Web ページ ヘッダー属性の設定を無視します。 Web ...
Web には一般的な読み込みアイコンが 2 つあります。1 つは iOS の「菊」、もう 1 つは ...
ドラッグ アンド ドロップ API は、ドラッグ可能な要素を HTML に追加し、ドラッグ可能な豊富...
この記事では、MySQL 8.0.16 winx64のインストールと設定の具体的な方法を記載します。...
いつから始まったのかはわかりませんが、コンピュータの電源を入れてインターネットに接続するたびに、デー...