検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSを使用して端が尖った直線を作成する方法

CSSを使用して端が尖った直線を作成する方法

青灯夜游
青灯夜游オリジナル
2021-09-10 17:32:522838ブラウズ

「background:linear-gradient(rgba(255,255,255,0)0%,rgba(255,255,255,1)50%,rgba(255,255,255,0)100%);」スタイルの描画を要素に追加できます。 cssでは両端が真っ直ぐで尖ったものになります。

CSSを使用して端が尖った直線を作成する方法

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

CSS では、linear-gradient() 関数を使用して、両端が尖った直線を作成できます。

例:

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		body {
			background-color: red;
		}

		.Line {
			width: 1px;
			height: 500px;
			background: linear-gradient(244deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
			margin: 20px;
		}
	</style>
</head>
<body>
	<div class="Line"></div>
</body>
</html>

CSSを使用して端が尖った直線を作成する方法

説明:

linear-gradient() 関数は、2 つの表現を作成するために使用されます。以上 色の線形グラデーションの画像。

線形グラデーションを作成するには、2 つの色を指定する必要があります。さまざまな方向 (角度として指定) でグラデーション効果を実現することもできます。方向が指定されていない場合、グラデーションはデフォルトで上から下に設定されます。

構文: background: Linear-gradient(direction, color-stop1, color-stop2, ...);

Value Description
direction 角度値を使用してグラデーションの方向 (または角度) を指定します。 。
color-stop1、color-stop2、... は、グラデーションの開始色と終了色を指定するために使用されます。

例: 

//线性渐变指定一个角度:
#grad { background-image: linear-gradient(180deg, red, yellow);}

//线性渐变指定多个终止色:
#grad {background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);}

//透明度:
#grad {background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));}

推奨チュートリアル: 「CSS ビデオ チュートリアル 」

以上がCSSを使用して端が尖った直線を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

関連記事

続きを見る