Create a gist now

Instantly share code, notes, and snippets.

@totoraj930 /index.html Secret
Created Aug 24, 2016

What would you like to do?
背景にサイズ可変の三角形を表示するやつ
<!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 Pゴシック", "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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment