ホームページ > 記事 > ウェブフロントエンド > CSS3 線形グラデーションで三角形を実現できますか?

CSS3 線形グラデーションで三角形を実現できますか?

青灯夜游オリジナル: 2022-04-25 14:47:402055ブラウズ

css3 線形グラデーションは三角形を実現できます。45 度の線形グラデーションを作成し、グラデーションの色を 2 つの固定色 (1 つは三角形の色、もう 1 つは透明色) に設定するだけです。構文 "linear" - グラデーション(45度、カラー値、カラー値50%、透明色50%、透明色100%)。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS3 では、三角形を実装する方法は数多くありますが、その 1 つは線形グラデーションを使用することです。以下に詳しくご紹介しましょう。

線形グラデーションを使用するlinear-gradient 三角形を実装する原理も非常に単純です。45° の線形グラデーションを実装します:

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, yellowgreen);
}

CSS3 線形グラデーションで三角形を実現できますか?

色をグラデーションカラーから 2 つの固定色に変更します:

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}

CSS3 線形グラデーションで三角形を実現できますか?

##次に、いずれかの色を透明にします:

div {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}

CSS3 線形グラデーションで三角形を実現できますか?

rotate または scale を回転させることで、さまざまな角度とサイズの三角形を取得することもできます:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html,
body {
width: 100%;
height: 100%;
display: flex;
}

div {
width: 100px;
height: 100px;
margin: auto;
}

.rotate {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
}

.top {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
transform: rotate(135deg);
}

.left {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
transform: rotate(45deg);
}

.bottom {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
transform: rotate(-45deg);
}

.right {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
transform: rotate(-135deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

CSS3 線形グラデーションで三角形を実現できますか?

(学習ビデオ共有:

css ビデオチュートリアル、Web フロントエンド )

以上がCSS3 線形グラデーションで三角形を実現できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html5 css css3

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：HTML5で頭と尻尾を固定する方法次の記事：HTML5で頭と尻尾を固定する方法

続きを見る