一般的な CSS3 の不規則な形状を作成する方法-フロントエンドQ&A-php.cn

一般的な CSS3 の不規則な形状を作成する方法

PHPz

リリース： 2023-04-13 11:38:20

オリジナル

1333 人が閲覧しました

CSS3 不規則なグラフィックデザインは、現代の Web ページデザインでますます一般的になってきています。不規則なデザインの作成はますます簡単になり、JavaScript やバックエンドスクリプトを使用せずに実現できるようになりました。この実装は CSS3 不規則性と呼ばれます。

CSS3 Ir Regular の利点は、その柔軟性と応答性です。さまざまなデバイス解像度に合わせて完全に応答性の高いページを作成できます。さらに、優れた不規則なデザインは、Web サイトにユニークなスタイルを追加することができます。

CSS3 不規則な形状は簡単に作成できます。必要な形状を切り取って、その周りに色を追加するか、背景画像を使用してより魅力的に見せるだけです。

ここで、一般的な CSS3 の不規則な形状を作成する方法を見てみましょう。

Triangle

Triangle は、CSS3 不規則グラフィックの最も基本的な図形の 1 つです。次のコードで作成できます。

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #007bff;
  border-left: 50px solid transparent;
}

ログイン後にコピー

台形

台形も三角形に似た単純な形状です。ただし、三角形とは異なり、台形には 2 つの短辺と 2 つの長辺があります。

.trapezoid {
  height: 0;
  width: 100px;
  border-top: 50px solid #007bff;
  border-bottom: 50px solid #007bff;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

ログイン後にコピー

Parallelogram

平行四辺形は、次のコードで作成できる単純な不規則な形です:

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background-color: #007bff;
}

ログイン後にコピー

Oval

楕円形は、次のコードで作成できるもう 1 つの CSS3 不規則形状です:

.ellipse {
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
}

ログイン後にコピー

Polygon

次のコードを使用して作成できます。五芒星:

.star {
  height: 0;
  width: 0;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #007bff;
  border-left: 50px solid transparent;
  transform: rotate(35deg);
}

.star:before {
  height: 0;
  width: 0;
  margin: -50px 0 0 -25px;
  content: "";
  position: absolute;
  border-right: 25px solid transparent;
  border-bottom: 30px solid #fff;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
}

.star:after {
  width: 0;
  height: 0;
  margin: -20px 0 0 -10px;
  content: "";
  position: absolute;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #007bff;
  border-left: 10px solid transparent;
  transform: rotate(35deg);
}

ログイン後にコピー

概要

CSS3 不規則なグラフィックデザインは難しくありません。適切なツールと基本的な知識があれば、単純な形状を簡単に作成できます。 Web ページのデザインでは、不規則なグラフィックデザインによってページに独自のスタイルが追加され、Web サイトにより良いユーザーエクスペリエンスがもたらされます。

以上が一般的な CSS3 の不規則な形状を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。