[CSS] CSSで三角形を実装する(1)

多くは言う必要はありませんが、より一般的に使用される 2 つの記述方法を次に示します。

一、国境の境界線

幅と高さは両方とも 0px に設定され、境界線の交差によって三角形が作成されます。これは最も一般的に使用される書き込み方法です。

.triangle{
	width: 0;
	height: 0;
	border: 100px solid;
	border-color: red green blue orange;
}

レンダリングは次のとおりです。

さて、4 つの小さな三角形はすでに形になっているので、少し修正するだけで 1 つずつ取り出すことができます。

1. 上三角

原理はシンプルで大雑把ですが、上の小さな三角形だけが必要なので、他の角の枠線の色を透明に設定できます。

.triangle{
	width: 0;
	height: 0;
	border-top: 100px solid red;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
}

レンダリング:

2. 下三角

.triangle{
	width: 0;
	height: 0;
	border-bottom: 100px solid blue;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
}

レンダリング:

3. 左三角

.triangle{
	width: 0;
	height: 0;
	border-left: 100px solid orange;
	border-top: 100px solid transparent;
	border-bottom: 100px solid transparent;
}

レンダリング:

4. 直角三角形

.triangle{
	width: 0;
	height: 0;
	border-right: 100px solid green;
	border-top: 100px solid transparent;
	border-bottom: 100px solid transparent;
}

レンダリング:

ただし、他の側面もまだスペースを占有しており、通常は位置決め位置と組み合わせて使用されることに注意してください。

5. 直角三角形

直角三角形が必要な場合、上記の書き方では不十分だと思われますので、別の考え方として、以下を見てください。

.triangle1{
	width: 0;
	height: 0;
	border-top: 100px solid red;
    border-right: 100px solid transparent;
}
.triangle2{
	width: 0;
	height: 0;
	border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
.triangle3{
	width: 0;
	height: 0;
	border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}
.triangle4{
	width: 0;
	height: 0;
	border-top: 100px solid red;
    border-left: 100px solid transparent;
}

効果は次のとおりです。

境界線以外に三角形の効果を実現する方法はありますか?

2 つの直線勾配勾配

はい、お読みのとおり、それはグラデーションです。どうやってするの？

1. 直角三角形

ここでは背景画像と一緒に使用する必要があります。以下でそのアイデアについて話しましょう。

(1) まずは縦横100pxの正方形を設定します

(2) 勾配の軸を設定します。ここで求めるのは直角三角形です。軸の方向を 45 度または -45 度に設定するだけです。最初の 4 つの小さな要素と組み合わせて考えることができます。境界線の下の三角形。45 度と -45 度は 2 つの三角形に相当しますが、方向が異なります。

(3) 次に、グラデーションカラーの設定を開始します。カラーの 1 つを透明に設定し、最初のカラーのレンダリングが停止する位置が 50% になるように、三角形が描画されます。

.triangle1{
  	width: 100px;
  	height: 100px;
  	background-repeat: no-repeat;
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0) 50%, #f00 50%);
}
.triangle2{
  	width: 100px;
  	height: 100px;
	background-image: linear-gradient(-45deg, #f00 50%, rgba(255, 255, 255, 0) 50%);
}
.triangle3{
  	width: 100px;
  	height: 100px;
  	background-repeat: no-repeat;
	background-image: linear-gradient(45deg, #f00 50%, rgba(255, 255, 255, 0) 50%);
}
.triangle4{
  	width: 100px;
  	height: 100px;
	background-image: linear-gradient(45deg, rgba(255, 255, 255, 0) 50%, #f00 50%);
}

効果は次のとおりです。

2. 非直角三角形

直角でない三角形の場合に注意が必要なのは、設定した幅と高さに応じて角度を調整する必要があることです。

.triangle {
	width: 100px;
  	height: 100px;
  	background-repeat: no-repeat;
	background-image: linear-gradient(26deg, red 50%, rgba(255, 255, 255, 0) 50%), linear-gradient(154deg, green 50%, rgba(255, 255, 255, 0) 50%);
	background-size: 100% 50%;
	background-position: top left, bottom left;
}

ここでは区別するために2色配置していますが、使用する際は色を統一すればOKです。

他の方向の三角形を参考にして、自分で試してみることもできます。

次の記事では、疑似要素を使用して三角形を実装します: CSS で三角形を実装する (2)

また、他に良い方法があれば、コメント欄に追加してください。