totoraj930/index.html Secret

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title>Border Triangle</title>
	<link rel="stylesheet" href="main.css">
</head>
<body>

	<div class="wrap">
		<div class="triangle"></div>
	</div>

	<div class="title-wrap">
		<h1 class="title">Border Triangle</h1>
	</div>

</body>
</html>

## main.css
/* note 初期化処理 */
*, *:before, *:after{
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}
body {
	line-height: 1;
	font-size: 16px;
	font-family: "Helvetica Neue", "メイリオ", Meiryo, Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
iframe {
	max-width: 100%;
}
img {
	border: none;
}
.dummy {
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

html, body {
	width: 100%;
	height: 100%;
}

/* 三角形を背景にするために */
.wrap {
	z-index: -1;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}
/* 三角形 */
.triangle {
	border-width: 50vh 50vw;
	border-style: solid;
	border-color: #ff1441 #4e0b18;
	border-color: #000 #000 #fff #fff;
}

/* タイトルを中央に持ってくるためのflex */
.title-wrap {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}
/* それっぽく装飾
　　ここでもvwが役立っている */
.title {
	padding: 1vw 1.2vw;
	color: #fff;
	border-width: .5vw;
	border-style: solid;
	border-color: #fff;
	font-size: 7vw;
	font-weight: normal;
	line-height: 1;
	text-transform: uppercase;
	text-shadow: .3vw .3vw 0 #000,
				1px 1px 0 #000,
				1px -1px 0 #000,
				-1px 1px 0 #000,
				-1px -1px 0 #000;
	box-shadow: inset .3vw .3vw 0 #000,
				.3vw .3vw 0 #000,
				1px 1px 0 #000,
				1px -1px 0 #000,
				-1px 1px 0 #000,
				-1px -1px 0 #000;
}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title>Border Triangle</title>
	<link rel="stylesheet" href="main.css">
	</head>
	<body>

	<div class="wrap">
	<div class="triangle"></div>
	</div>

	<div class="title-wrap">
	<h1 class="title">Border Triangle</h1>
	</div>

	</body>
	</html>
	/* note 初期化処理 */
	, :before, *:after{
	margin: 0;
	padding: 0;
	background-color: transparent;
	border: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
	}
	body {
	line-height: 1;
	font-size: 16px;
	font-family: "Helvetica Neue", "メイリオ", Meiryo, Helvetica, Arial, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳＰゴシック", "MS PGothic", sans-serif;
	}
	iframe {
	max-width: 100%;
	}
	img {
	border: none;
	}
	.dummy {
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	}

	html, body {
	width: 100%;
	height: 100%;
	}

	/* 三角形を背景にするために */
	.wrap {
	z-index: -1;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	}
	/* 三角形 */
	.triangle {
	border-width: 50vh 50vw;
	border-style: solid;
	border-color: #ff1441 #4e0b18;
	border-color: #000 #000 #fff #fff;
	}

	/* タイトルを中央に持ってくるためのflex */
	.title-wrap {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	}
	/* それっぽく装飾
	ここでもvwが役立っている */
	.title {
	padding: 1vw 1.2vw;
	color: #fff;
	border-width: .5vw;
	border-style: solid;
	border-color: #fff;
	font-size: 7vw;
	font-weight: normal;
	line-height: 1;
	text-transform: uppercase;
	text-shadow: .3vw .3vw 0 #000,
	1px 1px 0 #000,
	1px -1px 0 #000,
	-1px 1px 0 #000,
	-1px -1px 0 #000;
	box-shadow: inset .3vw .3vw 0 #000,
	.3vw .3vw 0 #000,
	1px 1px 0 #000,
	1px -1px 0 #000,
	-1px 1px 0 #000,
	-1px -1px 0 #000;
	}