/index.html Secret
Created
August 24, 2016 13:59
Star
You must be signed in to star a gist
背景にサイズ可変の三角形を表示するやつ
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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