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>

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

品川区の武蔵小山、目黒不動前、五反田駅、目黒駅近隣にて、web制作を軸にひとり稼業にて活動しております。
・web制作の学校に通っているけど実は授業についていけてない
・html、cssを独自で勉強しているけど基本的なことを理解していない
・これからwebの世界に入りたい
・委託して作成したホームページを修正したい
・webサイトをイチから作り直したい
等など、ご相談、お困りのことがございましたらお気軽にご連絡ください。
個々に対応いたします。

お問い合わせはこちら

<< Outlook2019の表示変更

10km散歩 >>