CSSシェイプで素晴らしい効果を作成する方法

Sep 17, 2025

操作方法

フロントエンド開発者は長方形で考える傾向があります。長方形の内側の長方形の内側の長方形の内側の長方形。私たちは円や三角形を作るために境界線を使ってトリックを雇うかもしれませんが、彼らはまだ偽装の箱です。まあこれは変わりようと考えています CSS 形、A. w3c. あなたが思う方法を変える候補勧告。

クリスマスオファー： ネットマガジンへの購読で最大47％割引

CSS形状を使用すると、sairc（）、省略記号（）、inset（）、およびpolygon（）を使用して幾何学的図形を作成し、それらをクリッピングやフィルタなどのエフェクトに適用します。さらに、形状はコンテンツの流れに影響を与える可能性があるため、円形のアバターのような機能を中心にテキストをきちんと折り返すことができます。

おそらく最も強力な形状関数はPolygon（）で、座標対応ペアを使用して定義された無制限点を使用して複雑な任意の形状を作成できます。使ったら SVG. 、これはあなたによく知られています。

このチュートリアルでは、ポリゴン内に囲まれた領域のみが表示されるように、クリップパスプロパティを使用してポリゴンを使用して、テキストから幾何学的形状を切り取ります。また、命への影響をもたらすために簡単な遷移を追加します。このレポの各ステップのコードをから掴むことができます。 Github、ここに。

01. HTMLで始まります

まず、HTML準備をしましょう。 Aだけ必要です ＆lt; div＆gt; 、私たちの 。クリップ クラスと私たちのテキストは、この効果の疑似要素を使用しているように、テキストと同じ値の属性を追加して、それをハードコーディングするのではなくCSSに読み込むことができます。

 divクラス= "クリップ"データコンテンツ= "クリッピングデモ"＆gt。
クリッピングデモ
＆lt; / div＆gt;

次に、画面を記入してテキストデッドセンターを合わせることをお勧めします。 フレックスボックス このための魔法。テキストのスタイルとサイズもしましょう。

 .clip {
//画面を入力してください
位置：絶対;
トップ：0;
左：0;
幅：100％。
高さ：100％。
//整列
表示：Flex; // alignmentのためにFlexを使用してください
Justify-Content：Center; //水平調整
整列品：中央; //垂直方向の位置合わせ
//テキストスタイリング
フォントファミリー：「ワークサン」、アリア、Helvetica、Sans-Serif。 // Work SansはGoogle Fontsから入手できます
フォント重量：800;
フォントサイズ：8rem;
テキスト整列：中央;
text-transform：大文字

02.いくつかのスタイルを追加します

今、私たちはスタイルをスタイルすることができます ：：前 そして ::後に 疑似要素、それぞれがテキストの上にあるレイヤーになります。デフォルトでは、 ::後に 最高のzインデックスがあります。便利 attr（） セレクターは私たちの価値を読みます データコンテンツ 属性。

疑似要素は位置とFlexboxのプロパティを共有します。そのため、CSSをわずかにリファクタリングし、SCSSのパワーを活用して、スタイルシートのティディを保持できます。フォントスタイルは継承されます。私たちは使用しています ... すでにカバーされているプロパティを示すために。

 .clip {
...
//自己を位置決め（＆amp;）と擬似要素（前後）
＆amp;
＆amp; ::前、
＆amp; ::後{
  位置：絶対;
  トップ：0;
  左：0;
  幅：100％。
  高さ：100％。
  表示：Flex; // alignmentのためにFlexを使用してください
  Justify-Content：Center; //水平調整
  整列品：中央; //垂直方向の位置合わせ
}
＆amp; ::前、
＆amp; ::後{
  コンテンツ：attr（データコンテンツ）; //属性値をコンテンツとして使用します
}

ブラウザの結果は同一に見えます。疑似要素はテキストの上に直接座っているためです。あなたは彼らのスタイルを変更することができます DevTools. それらがどのように階層化されているかを見るために。

03.背景と色を設定します

各レイヤーに別の色と背景を与える時間 - 私たちが変数として事前定義されたいくつかの大胆な、オントレンド、ネオンカラーのために行こう。テキストをHTMLに追加するのではなく、CSSパディングトリックを使用して複数の行に折り返すこともできます。

これは他に、2つの異なるタイプのラインブレイクを使用する必要がありますので便利です。 ＆lt; br＆gt; 内側に ＆lt; div＆gt; そしてあいまいな \ A. 属性に。

 .clip {
...
＆amp;
＆amp; ::前、
＆amp; ::後{
  パディング：0 50％。
  ボックスサイジング：ボーダーボックス。
}
＆amp; ::前{
  カラー：$ WHITE;
  背景：$ピンク;
}
＆amp; ::後{
  カラー：$ピンク
  背景：$青。
}

パディングトリックは、テキストゼロの水平幅を与えることによって機能し、各単語を新しい行に折り返すようにブラウザを強制します。

04.テキストをクリップします

面白いビットの時間 - 私たちはテキストを切り取る準備が整いました。右下から右上に2つの三角形に画面をスライスする、対角クリップを作成します。

the ：：前 疑似要素は左上三角形にのみ表示されます。 ::後に 疑似要素は右下の三角形にのみ表示されます。これを達成するためのコードは次のとおりです。

 .clip {
...
＆amp; ::前{
  クリップパス：ポリゴン（0 0,100％0,0,00％、0 100％）。
}
＆amp; ::後{
  クリップパス：ポリゴン（100％0,100％、0 100％、100％0）。
}

これにより、4点のポリゴンが作成されます。各点は座標対のペアによって記述されます。単にX（左から右）とY（上から下へ）の値。値は絶対的なもの（たとえば、PX）または相対（例：％）です。ポイントは左上を参照しているので、 100％100％ 右下にあります。

それらの各ポイントを接続して形状を形成する順序で行を接続してください。の中に ：：前 ポリゴン左上から始まります （0 0） 、画面を右上に移動します （100％0） そしてそれから左下に下がります （0 100％） 。

うまくいけば、あなたは今あなたの切り取られたテキストを見ているでしょう。ブラウザのサイズを変更し、それに応じてクリッピングが反応するのを見るでしょう。

Chromeを使用している場合は、Chromeのコンポジットレイヤによって引き起こされている間、サイズ変更中にいくつかの再描画の問題が表示されます。残念ながら、デモは全画面であるため、推奨されている 変化：変換します 財産 変換：transmatez（0） ハックを是正しないでください。ただし、切り替えた場合 。クリップ に 位置：固定 できます。

クリップ{
＆amp;
＆amp; ::前、
＆amp; ::後{
  位置：固定
}

Chromeが役立つことを試みていることに留意しており、この回避策はパフォーマンスに影響を与えます。生産のようなものをするときは、必ずパフォーマンスをプロファイルしてください。

05.遷移を追加します

私たちがクリップテキストを持っていたので、いくつかの遷移でそれを生命にもたらしましょう。良いニュースはあなたが単に遷移することができるということです クリップパス ブラウザがすべてのハードワークを実行するようにプロパティ。疑似要素に対する遷移を有効にし、次に4つの異なる状態を遷移させることを定義しましょう。

状態1：これは初期状態ですので、他の3つを作成しましょう

CSSの下部にある各ブロックを追加すると、そのように見えるものがわかります。

状態2：背景を明らかにするために三角形をわずかに動かす

これはコンゴ共和国の旗のように少し見えます。各ポリゴン三角形の先端から20パーセントを削除するとトリックが行われます。

状態3：三角形を長方形にモーフする

これはフレンチトリコロールと似ています。

その4番目の調整ペアはどうですか？まあ、これはそれが役に立つところです。遷移することがわかりました クリップパス 使用されている形状関数が同じ（多角形＆gt;多角形）で、使用される点数が同じである場合にのみ機能します - ブラウザは各個別点を遷移させます。だからこそ、その4番目の隠されたポイントがあります。

 .clip {
＆amp; ::前{
  クリップパス：ポリゴン（0 0,40％0,40％100％、0 100％）。
}
＆amp; ::後{
  クリップパス：ポリゴン（100％0,100％100％、60％100％、60％0）。
}

状態4：それらの多角形をねじる

私たちの旗のテーマに固執すると、これは「私はマリティフフラグシグナリングの世界でタグを必要とする」と似ています。

ここで私たちは多角形をねじっているので、中央に横断し、それぞれ2つの三角形を形成します。これは遷移が座標のペアを理解するのを助けることができるときです。遷移を実際に遅くすることで、各ポイントが新しい位置にどのように移動しているかを確認できます。これは、ペアの順序がどのように遷移に影響するかを理解し始めます。それは実際にあなたに遷移を制御するのにかなりのコントロールを与えます。

 .clip {
＆amp; ::前{
  クリップパス：ポリゴン（100％0,0 0,100％100％、0100％）。
}
＆amp; ::後{
  クリップパス：ポリゴン（100％0,100％、0 0,0,00％）。
}

要約

私たちは皆セットしていますが、まだ状態を変更することはできません。つまり、アクションの遷移を見ることができません。これを達成する方法はたくさんありますので、それはあなた次第です。 RepoとCodepenでは、隠しラジオボタンと〜一般兄弟セレクタを使用して100％のJavaScriptフリーソリューションを使用しました。このチュートリアルのコードペンをチェックすることもできますここに。

この記事は当初の問題298に登場しました ネット 、プロのウェブデザイナーと開発者のための雑誌 - 最新の新しいWebトレンド、技術とテクニックを提供しています。 ここに問題298を購入してください または ここでネットを購読する 。

特別なクリスマスオファー： ネットへの購読で最大47％割引 あなたやクリスマスのための友人のために。それは限られたオファーです、とても素早く動く...

関連記事：

28 CSSの優れた例
CSSシェイプを使用してピラミッドレイアウトを作成する方法
あなたのウェブレイアウトに革命をもたらすためのCSSトリック

CSSシェイプで素晴らしい効果を作成する方法

01. HTMLで始まります

02.いくつかのスタイルを追加します

03.背景と色を設定します

04.テキストをクリップします

05.遷移を追加します

要約

操作方法 - 最も人気のある記事

塗装ブラシをきれいにする方法：決定的ガイド

Zbrushで人間の鼻を彫刻する方法：4簡単なステップ

Zbrushで3Dと漫画アートを組み合わせた方法

Adobe CCを使って多露光画像を作成する

Zbrushのエイリアン海賊クリーチャーをモデル化する

夢のようなファンタジー森林シーンを描く方法

3Dオブジェクトを3.jsで溶かす方法

あなたの漫画のスキルを育む

カテゴリ