【CSS】CSSで三角形を実装する(2)

前回の記事では:

三角形を実装するには 2 つの方法が説明されています。

国境
線形勾配勾配

この記事では 3 番目の方法、つまり擬似要素を使用してバブルトライアングルを実現します。

1. しっかりとした泡

実際には厳密にはborder+pseudo-elementsによって実現されていますが、詳しくは以下のコードを参照してください。

/* 气泡三角 */
.triangle {
	width: 100px;
    height: 50px;
    background: #abc88b;
    border-radius: 5px;
    position: relative;
}
/* 上 */
.triangle1:before {
	content: "";
    width: 0px;
    height: 0px;
	border-bottom: 8px solid #abc88b;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: absolute;
	top: -8px;
	left: 40px;
}
/* 下 */
.triangle2:before {
	content: "";
    width: 0px;
    height: 0px;
	border-top: 10px solid #abc88b;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: absolute;
	bottom: -10px;
	left: 40px;
}
/* 左 */
.triangle3:before {
	content: "";
    width: 0px;
    height: 0px;
	border-right: 10px solid #abc88b;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 15px;
	left: -10px;
}
/* 右 */
.triangle4:before {
	content: "";
    width: 0px;
    height: 0px;
	border-left: 10px solid #abc88b;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 15px;
	right: -10px;
}

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

見覚えがあると思いますが、これは border の直接実装に似ていませんか? ただ書き方が違うだけです。

border を直接使用する場合と比較して、疑似要素を使用すると追加の div を作成する必要がなく、div 上で実行できます。

2.中空の泡

固体の泡を理解した後、中空の泡が必要な場合はどうすればよいですか?

まず、背景色を削除して枠線を追加する必要があります。

border: 1px solid #abc88b;

次に、小さな実線三角形を覆う三角形が必要です。

次に、疑似要素を before に追加し、after を追加します。After には小さな白い三角形があり、これを解決するには色付きの三角形よりも 1 ピクセル小さくするだけで済みます。

完全なコードは次のとおりです。

.triangle {
	width: 100px;
    height: 50px;
    border: 1px solid #abc88b;
    border-radius: 5px;
    position: relative;
}
/* 上 */
.triangle1:before {
	content: "";
    width: 0px;
    height: 0px;
	border-bottom: 8px solid #abc88b;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: absolute;
	top: -8px;
	left: 40px;
}
.triangle1:after {
	content: "";
    width: 0px;
    height: 0px;
    border-bottom: 7px solid #ffffff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    position: absolute;
    top: -7px;
    left: 41px;
}
/* 下 */
.triangle2:before {
	content: "";
    width: 0px;
    height: 0px;
	border-top: 10px solid #abc88b;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	position: absolute;
	bottom: -10px;
	left: 40px;
}
.triangle2:after {
	content: "";
    width: 0px;
    height: 0px;
	border-top: 9px solid #ffffff;
	border-left: 9px solid transparent;
	border-right: 9px solid transparent;
	position: absolute;
	bottom: -9px;
	left: 41px;
}
/* 左 */
.triangle3:before {
	content: "";
    width: 0px;
    height: 0px;
	border-right: 10px solid #abc88b;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 15px;
	left: -10px;
}
.triangle3:after {
	content: "";
    width: 0px;
    height: 0px;
	border-right: 9px solid #ffffff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	position: absolute;
	top: 16px;
	left: -9px;
}
/* 右 */
.triangle4:before {
	content: "";
    width: 0px;
    height: 0px;
	border-left: 10px solid #abc88b;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	position: absolute;
	top: 15px;
	right: -10px;
}
.triangle4:after {
	content: "";
    width: 0px;
    height: 0px;
	border-left: 9px solid #ffffff;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	position: absolute;
	top: 16px;
	right: -9px;
}

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

OK、これらの方法をマスターすれば、三角形を実現するのに大きな問題はありません。将来的には他の方法も追加される予定です。