できたもの

GIF でどうぞ。

できたもの

方法

vwvhを使います。

この単位は viewport の横幅と縦幅のパーセントということになります。

ですので100vwと書くとviewport の横幅の 100%ということになります。

あとはいつも通り border を使って三角を作れば終了っす。

なんで%を使わないかって?使えないからだよ!

ソースコード

Gist にあります。

https://gist.github.com/totoraj930/6f15685b9749ad4493c296d1fc04ce11

<!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>
view raw index.html hosted with ❤ by GitHub
/* 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;
}
view raw main.css hosted with ❤ by GitHub

おわりに

誰得すぎる・・・。

それにしても記事雑っ!