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

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

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

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

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

1. Triangle

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

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

2. 台形

台形も三角形に似た単純な形状です。ただし、三角形とは異なり、台形には 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;
}

3. Parallelogram

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

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

4. Oval

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

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

5. 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 サイトの他の関連記事を参照してください。