cssで背景色を斜めに入れる

カテゴリー：PC作業タグ：css

webデザイン・ホームページを作成していると、

背景色どうしようかなぁ･･･
画像を入れて切り替えようかなぁ･･･
それともカラーで仕切ろうかなぁ･･･

なんてよくある悩みのひとつで。
一番簡単な方法として、1ページの中にあるコンテンツ毎に背景色を変える手法が一番ラクなのですが、それも味気ないですよね。
せめて少しでもデザインしました感を出したいと思った時に使える方法が背景色を斜めにする方法です。

正方形で作成するとわかりやすいですが、背景が正方形である方が珍しいので、正方形と横長長方形で説明していきます。

縦分割

縦分割した色分けをした場合の表示とコードです。

css-test1-1

css-test1-2

<style>
.css-test1-1{
	width:200px;
	height:200px;
	border:1px solid #666;
	background:linear-gradient(90deg, #ff6600 0%, #ff6600 50%, #ff99cc 50%, #ff99cc 100%); 
}
.css-test1-2{
	width:400px;
	height:200px;
	border:1px solid #666;
	background:linear-gradient(90deg, #ff6600 0%, #ff6600 50%, #ff99cc 50%, #ff99cc 100%); 
}
</style>

<div class="css-test1-1">css-test1-1</div>
<div class="css-test1-2">css-test1-2</div>

真半分斜め分割

右上がりで真半分に斜め分割した色分けをした場合の表示とコードです。

css-test2-1

css-test2-2

<style>
.css-test2-1{
	width:200px;
	height:200px;
	border:1px solid #666;
	background:linear-gradient(135deg, #ff6600 0%, #ff6600 50%, #ff99cc 50%, #ff99cc 100%); 
}
.css-test2-2{
	width:400px;
	height:200px;
	border:1px solid #666;
	background:linear-gradient(153.5deg, #ff6600 0%, #ff6600 50%, #ff99cc 50%, #ff99cc 100%); 
}
</style>

<div class="css-test2-1">css-test2-1</div>
<div class="css-test2-2">css-test2-2</div>

真半分斜め分割（透過）

右上がりで真半分に斜め分割し、半分は透過、半分は色付けをした場合の表示とコードです。

css-test3-1

css-test3-2

<style>
.css-test3-1{
	width:200px;
	height:200px;
	border:1px solid #666;
	background:linear-gradient(135deg, transparent 0%, transparent 50%, #ff99cc 50%, #ff99cc 100%); 
}
.css-test3-2{
	width:400px;
	height:200px;
	border:1px solid #666;
	background:linear-gradient(153.5deg, transparent 0%, transparent 50%, #ff99cc 50%, #ff99cc 100%); 
}
</style>

<div class="css-test3-1">css-test3-1</div>
<div class="css-test3-2">css-test3-2</div>

斜め分割（透過）その1

右下がりで斜め分割し、半分は透過、半分は色付けをした場合の表示とコードです。

css-test4-1

css-test4-2

<style>
.css-test4-1{
	width:200px;
	height:200px;
	border:1px solid #666;
	background:linear-gradient(200deg, transparent 0%, transparent 50%, #ff99cc 50%, #ff99cc 100%); 
}
.css-test4-2{
	width:400px;
	height:200px;
	border:1px solid #666;
	background:linear-gradient(200deg, transparent 0%, transparent 50%, #ff99cc 50%, #ff99cc 100%); 
}
</style>

<div class="css-test4-1">css-test4-1</div>
<div class="css-test4-2">css-test4-2</div>

斜め分割（透過）その2

右上がりで斜め分割し、半分は透過、半分は色付けをした場合の表示とコードです。

css-test5-1

css-test5-2

<style>
.css-test5-1{
	width:200px;
	height:200px;
	border:1px solid #666;
	background:linear-gradient(150deg, transparent 0%, transparent 50%, #ff99cc 50%, #ff99cc 100%); 
}
.css-test5-2{
	width:400px;
	height:200px;
	border:1px solid #666;
	background:linear-gradient(150deg, transparent 0%, transparent 50%, #ff99cc 50%, #ff99cc 100%); 
}
</style>

<div class="css-test5-1">css-test5-1</div>
<div class="css-test5-2">css-test5-2</div>

斜め分割（透過）その3

右下角に色付けをした場合の表示とコードです。

css-test6-1

css-test6-2

<style>
.css-test6-1{
	width:200px;
	height:200px;
	border:1px solid #666;
	background:linear-gradient(150deg, transparent 0%, transparent 70%, #ff99cc 70%, #ff99cc 100%); 
}
.css-test6-2{
	width:400px;
	height:200px;
	border:1px solid #666;
	background:linear-gradient(150deg, transparent 0%, transparent 70%, #ff99cc 70%, #ff99cc 100%); 
}
</style>

<div class="css-test6-1">css-test6-1</div>
<div class="css-test6-2">css-test6-2</div>

どれもパーツのサイズと角度によって異なります。
ご自身がデザインするサイトに合わせてご利用下さい。

<< Outlook2019の表示変更

10km散歩 >>