CSS形状を設計する方法：紹介

Feb 3, 2026
操作方法

すべてのウェブサイトの基礎は、ページをコンテンツの小さい要素に下げて分割することです。設計者にとってこれに関する大きな問題は、コンテンツが常に長方形であることです。画面は長方形の形状であり、その中の細分化は長方形になるだろう。このチュートリアルでは、CSSクリップパスプロパティと回転を使用して設計をより面白くすることで、長方形の形状を超える方法を調べるつもりです。あなたのデザインをより面白くするための他の方法で、私たちの例をチェックしてください。 CSSアニメーション 。これらすべてが仕事のように聞こえるなら、上を試してみてください ウェブサイトビルダー 代わりに。しかし、あなたのサイトのニーズが何であれ、あなたは権利を得る必要があります ウェブホスティング あなたのために。

から始める最も簡単な形状は円または楕円形です。あなたが長方形を持っていて、あなたは楕円形を持つことになるでしょう、そしてあなたが楕円形を持っているなら、あなたが正方形から始めるなら、あなたは同じ長さであるのであなたは円を得るでしょう。これはあなたがおそらく前に行われたものですが、それはページのデザインでしばしば使用されていた技術です。

  • 20の最良のワイヤフレームツール

より複雑な解決策は、CSSクリップパスを使用してDIVの可視部分を減らすことによって三角形を作成することです。三角形は、3点しかないため、作成するのにかなり簡単な形状ですが、より複雑な形状を作成する場合は、ビジュアルクリップパスエディタが必要になります。

このチュートリアルでは、グラデーションや回転の長方形など、これらの要素をすべて追加する方法について説明します。 CSSグラデーションを追加し、CSSを介して複雑な幾何学的設計を作成できます。

01.はじめに

開く 開始 IDEコードエディタのフォルダと編集を開始する index.html ページ。チュートリアルを開始するには、グーグルフォントの書体へのシンプルなリンクアップが必要になります。これにより、テキストが後で含まれている場合には、ページに適切な書体が追加されます。

02.図形を一緒に固定します

の中に 体 ページ上のタグ次のコンテンツを追加します。 the 形状に備えて DIVタグは、生成されたさまざまな形状のすべてを保持するために使用されます。これはブラウザビューポートを埋めるようになります。作成される最初の形状は単純な円になり、他の画像を一緒に固定します。

03.ページを作ります

今に移動します CSS フォルダを開いて shapes.css. ファイル。ボディとHTMLは、Tutorialの最後に追加されるテキストの大部分を仕上げ時に追加されるように設定して、ブラウザを適切なフォントファミリで埋めるように設定されています。 

本体、
HTML {
マージン：0;
パディング：0;
幅：100％。
高さ：100VH;
オーバーフロー-X：非表示;
フォントファミリー： 'LATO'、SANS-SERIF;
text-transform：大文字

04.図形を含む

Mountain scene on a computer screen

所定の場所にあなたの背景画像から始めます

次のCSSルールはDIV用のIDの場合 shaps_contain. 。これはブラウザに隠されたhiddでブラウザを埋めるように設定されています。 the 翻訳3D コンテンツがハードウェアアクセラレーションされていることを確認することです。 2つの背景画像の前に大きな境界線が追加されます。 1つは正の画像ですが、上記のものはアクアカラーの半透明のグラデーションです。 

 #shape_contain {
ボックスサイジング：ボーダーボックス。
幅：100％。
高さ：100VH;
オーバーフロー：非表示;
変換：translate3d（0,0,0）;
境界線：20pxソリッドRGB（255,254,244）;
背景：線形勾配（0deg、rgba（7、
47,46,0.8）0％、RGBA（255,252,226,0.5）
100％）、URL（../ images / mountain.jpg）
繰り返しのないセンターセンター。
背景サイズ：カバー。

05.丸から始めます

Mountain background with blue translucent circle

サークルは作成する最も簡単な形です

作成される最初の幾何学的形状は、最も単純な形の1つです。円は任意の正方形の形で作ることができます div 境界半径を追加することによって 50％ 。円は半透明で、柔らかい影はその端に追加されます。 

＃円{
幅：80VH;
高さ：80VH;
境界半径：50％。
背景：RGBA（136,239,231,0.3）。
位置：絶対;
トップ：7VH;
左：50％。
変換：translate3d（-50％、0,0）;
Box-Shadow：0px 5px 40px RGBA（0,0,0,0.3）;

06.三角形を試してください

次の形状は三角形であるため、わずかに複雑になります。ポリゴン形状を作成できるCSSクリップパスを使用して作成するのは比較的簡単です。このDIVを追加に追加してください shaps_contain. div。 

 DIV ID =「TRI1」＆gt; / div＆gt;

07.三角形を適用します

Triangle with cropped woman's face within in, on top of the blue circle

フィルタは色相をわずかにシフトします

ここで クリップパス CSSが三角形を作るために作成されます。形状は3点です。背景画像を追加し、ここでフィルタを追加して、色相をわずかにシフトさせることができ、それは画像がコントラストで強調されたわずかなピンクの色合いを撮影させる。 

 #TRI1 {
クリップパス：ポリゴン（0 0,100％0,50％
100％）;
幅：100VH;
高さ：88VH;
背景：URL（../ images / girl3.jpg）
繰り返しのないセンターセンター。
背景サイズ：カバー。
位置：絶対;
トップ：10VH;
左：50％。
変換：translate3d（-50％、0,0）;
フィルタ：Hue-Rotate（310deg）コントラスト（140％）。
不透明度：0.8;

08.もっと複雑に行く

Screengrab of Clip-Path maker tool

このツールを使用すると、より複雑な形状を作成できます

作成される次の形状は、中央に穴がある三角形になります。これは比較的簡単に聞こえますが、クリップポリゴンは1つの連続的な線である必要があるため、作成するのが複雑です。同様の形状を作成する必要がある場合は、 Bennettのクリップパスメーカー 形を作成する。 

 DIV ID =「TRI2」＆gt; div＆gt;

09.図形を積み重ねる

ここでの形状は、前述のリンク内で視覚的に作成されたため、より複雑です。雲画像は形状に配置され、次に色相がこれをもう少し黄色にするように調整されます。各形状は、周囲のDIVの中央に絶対に配置され、もう一方の上に積み重ねられています。 

 #TRI2 {
クリップパス：ポリゴン（50％0,0％100％、9％100％、
50％17％、50％17％、85％91％、13％91％、0 100％、
100％100％、50％0）。
幅：80VH;
高さ：70VH;
背景：URL（../ images / clouds.jpg）
繰り返しのないセンターセンター。
背景サイズ：カバー。
位置：絶対;
トップ：1VH;
左：50％。
変換：translate3d（-50％、0,0）;
フィルタ：Hue-Rotate（90deg）コントラスト（140％）。
不透明度：0.7;

10.ブラウザのサイズを変更してみてください

次の三角形を追加する必要があります shaps_contain. div。ブラウザをチェックすると、ブラウザのサイズを変更できることがわかりますが、シェイプはパーセントに基づいているため完全にサイズ変更されます。コンテナはビューポートの高さで設定されているため、常に画面に収まります。 

 DIV ID =「TRI3」＆gt; / div＆gt;

11.スタイルアップ

More triangles layered on top of the design

最後の三角形には中央に穴があります

最後の三角形は、前のものと同じ形状を中心に穴の中央に使用されます。今回は、画像ではなくターコイズの単純な色合いを持っています。この三角形を通して下の他のコンテンツを介して見ることができるように透明度が低く設定されます。 

 #TRI3 {
クリップパス：ポリゴン（50％0,0％100％、9％100％、
50％17％、50％17％、85％91％、13％91％、0 100％、
100％100％、50％0）。
幅：80VH;
高さ：70VH;
背景：RGBA（0,113,110,0.2）。
位置：絶対;
トップ：20VH;
左：50％。
変換：translate3d（-50％、0,0）;

12.傾斜したストリップを作成します

Design with angled pink strip added

半透明の勾配を使って斜めのストリップを混ぜる

次の形状は斜めのDIV形状です。これは三角形の間に配置されます。 shaps_contain. divタグ。画面を横切って半透明なグラデーションを使用してそれをページに混ぜ合わせます。これらはまた、異なるサイズのスクリーンに拡大縮小します。

13.角度を作ります

Screengrab from CSS Gradient tool

IDは形状の位置を設定します

the ストリップ クラス背景グラデーションを設定します。これはオンライングラデーションエディタを使用して行われます CSSグラデーション 。その後、IDはこの特定の傾斜勾配形状の位置を設定します。それは中央に置かれてから、異なるモニターに一貫した配置を保持するように少しずつオフセットされます。 

 .strip {
位置：絶対;
背景：線形勾配（0deg、rgba（164、
0,217,0）0％、RGBA（164,0,217,0.3）35％、
RGBA（255,67,134,0.3）65％、RGBA（255,67、
134,0）100％）。
}
＃ストリップ1 {
幅：20Vh;
高さ：120VH;
左：50％。
変換：translate3d（-175％、-15％、0）
Rotatez（30deg）;

14.もっと勾配の角度を試してみてください

そのクラスを保持する2つのDIVタグが追加されました ストリップ 。 IDはそれらを画面上のさまざまな位置に配置することを可能にします。これらは、色のスプラッシュを追加しながら、シーンの全体的な審美的な繰り返し形状として使用されます。 

 DIV ID =「ストリップ2」クラス=「ストリップ」＆gt;＆lt; / div＆gt;

15.角度を置きます

Final design, featuring layered CSS shapes on a photographic background

最終的な追加はデザインのバランスを取ります

2つのストリップ角度勾配形状は、スクリーン上の主要な内容の両側に配置されています。左下に向かって左右に向かって配置されているので、スクリーンを残します。ブラウザのサイズを変更して、これらの要素が画面上の場所に固定されていることを確認して、フィットするスケールを表示します。 

＃STRIP2 {
幅：5VH;
高さ：90VH;
左：50％。
変換：translate3d（60VH、-15％、0）
Rotatez（30deg）;
}
#lits3 {
幅：5VH;
高さ：90VH;
左：50％。
変換：Translate3D（-70VH、25％、0）
Rotatez（30deg）;

16.テキストコンテンツを追加します

このページには膨大な量のテキストコンテンツがありませんが、ここでのDIVは画面に配置される残りのページコンテンツのすべてを持っています。 DIVタグの閉じ札の前にDIVを追加する必要があります。 shaps_contain. パネル。これらのテキスト要素は異なる角に分割されます。 

 DIV ID =「左側」＆GT;長方形を超えて行く
＆lt; / div＆gt;

17.テキストを回転させる

左側のDIVはスクリーンの左側に絶対に配置され、横方向にぴったりとなるように反時計回りに回転します。トランスフォームの原点は少し移動して、テキストを画面の端に近づけるようにします。 

 #LEFTSIDE {
位置：絶対;
左：20px;
トップ：70％。
変換元：10％0％。
変換：回転（-90deg）;

18.右側のテキストを配置します

右手のテキストは、画面の右側から配置されている以外は左のテキストと非常によく似ています。テキストが良くなっているように回転を時計回りに押し上げて、画面の右側に読みやすくなります。 

 #rightside {
位置：絶対;
右：20px;
トップ：70％。
変換元：90％0％。
変換：回転（90DEG）;

19.テキストの定型化

今左上隅のテキストは様式化されています。最初の2つの単語はデフォルトのサイズに残されていますが、残りの単語はテキストに階層を提供するために次の行に拡大され、次の行に配置されます。これはサイズ変更を通して左上隅に固執します。 

 #topleft {
位置：絶対;
左：40px;
トップ：40px;
幅：180px。
テキスト整列：中央;
}
#topleftスパン{
フォントサイズ：1.8em;

20.右側のテキストを設定します

右上の角のテキストが設定されました。これは黒い円形の円の内側に設定されており、テキストは丸に白で設定されています。これは、DIV高さと同じ回線の高さを使用して、中央のテキストを位置合わせするための線高さ法を使用します。 

 #toPright {
位置：絶対;
右：35px;
トップ：25px;
線高さ：100px;
フォントサイズ：1.4em;
幅：100px;
高さ：100px;
背景：＃000;
カラー：#FFF;
テキスト整列：中央;
境界半径：50％。

21.見出しテキストを設定します

Final design shown within a mobile-sized browser window

設定する最後のテキストはメイン見出しです

設定する最後のテキストは、画面の中央のメインヘッドラインです。このページデザインのハイライト色とブレンドするように、書体を変更し、淡いピンクの半透明色が与えられます。ページを保存してブラウザを更新して完成した結果を確認します。ページのコピーを保存または共有したいですか？それをPDFとしてエクスポートして保存してください クラウドストレージ 。 

＃ヘッドライン{
位置：絶対;
幅：100％。
zインデックス：200;
パディングトップ：65VH;
フォントファミリー： 'Arvo'、Serif。
テキスト整列：中央;
カラー：RGBA（233,173,255,0.8）。
フォントサイズ：8VW;
text-shadow：0px 3px 50px RGBA（0,0,0,0.5）;

この記事はもともとCreative Web Design Magazineで公開されました ウェブデザイナー 。 問題284を購入する または 申し込む 。

続きを読む：

  • CSS artを始めよう
  • 5クールCSSグリッドジェネレータ
  • CSS方法論へのWebデザイナガイド

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

フォトショップでレイヤーをフリップする方法：完全なガイド

操作方法 Feb 3, 2026

ダブルを見る？この画像は反転して元のものとブレンドされています （画像クレジット：�..

ネオン創世記ヱヴァンゲリオンからのあすかを引き出す方法

操作方法 Feb 3, 2026

（イメージクレジット：Paul Kwon） 作成 キャラクターデザイン 生活のために..

Chart.jsを使用してデータをインタラクティブダイアグラムに変える

操作方法 Feb 3, 2026

ページ1/2： チャートを使う：ステップ01-10 チャートを..

スライドアウトメニューを作成する

操作方法 Feb 3, 2026

改善するための素晴らしい方法 ユーザー体験 あなたのサイトではスライドアウトメニューを追加することです。ユーザ�..

Houdiniで植物を育てる

操作方法 Feb 3, 2026

Houdiniの強い点は常にその手続き的な性質でした。いくつかのノードと小さい表現のセットを使�..

拡張現実マーカーのコード方法

操作方法 Feb 3, 2026

ページ1/2： ページ1 ページ1 2�..

ウェットインウェットペインティング技術でグリップします

操作方法 Feb 3, 2026

ウェットインウェットはAです 絵画技術 それはしばしば欲求不満を引き起こす可能性..

センサーデータを収集するアプリを作成する

操作方法 Feb 3, 2026

今日、相互接続された製品を開発するための手頃な価格のプラットフォームは広範囲の空室状況..

カテゴリ