<div class="eva"> <div class="box-lg" style="transform: translateX(-50%);"> <div class="bg1"></div> <div class="brand"> <span class="check" style="left: -10px;">檢驗終了</span> 使徒來襲 <span class="check" style="right: -10px;">檢驗終了</span> </div> <div class="bg2"></div> </div> <div class="box-warn" style="left: 83px; top: 62px;"> <div class="bg1"></div> <div class="brand warn">警告!</div> <div class="bg2"></div> </div> <div class="box-warn" style="left: 647px; top: 62px;"> <div class="bg1"></div> <div class="brand warn">警告!</div> <div class="bg2"></div> </div> <div class="box-default" style="left: 225px; top: 125px;"> <div class="bg1"></div> <div class="brand"></div> <div class="bg2"></div> </div> <div class="box-default" style="left: 366px; top: 187px;"> <div class="bg1"></div> <div class="brand"></div> <div class="bg2"></div> </div> <div class="box-default" style="left: 507px; top: 125px;"> <div class="bg1"></div> <div class="brand"></div> <div class="bg2"></div> </div> <h1>新世紀福音戰士</h1> <div class="god"> <a href="#" onclick="alert('勇敢的少年啊!使徒已經來襲,為了世界和平!請慷慨的掏出錢包,為人類的未來獻上一份力吧!愛心援助QQ號: 786220806');">拯救世界</a> </div> <audio src="https://dn-bitibiti.qbox.me/%E9%AB%98%E6%A9%8B%E6%B4%8B%E5%AD%90%20-%20%E6%AE%8B%E9%85%B7%E3%81%AA%E5%A4%A9%E4%BD%BF%E3%81%AE%E3%83%86%E3%83%BC%E3%82%BB%E3%82%99.mp3" autoplay></audio> </div>
html, body { height: 100%; } body { padding-top: 2em; background-color: #000; margin: 0; box-sizing: border-box; } @mixin arrow-left($len, $color: red) { width: 0; height: 0; border-top: $len solid transparent; border-bottom: $len solid transparent; border-right: $len solid $color; } @mixin arrow-right($len, $color: red) { width: 0; height: 0; border-top: $len solid transparent; border-bottom: $len solid transparent; border-left: $len solid $color; } @mixin hexagon($width, $height, $color: red) { width: $width; height: $height; background-color: $color; position: relative; &::before { content: ''; position: absolute; top: 0; left: -$height / 2; @include arrow-left($height / 2, $color); } &::after { content: ''; position: absolute; bottom: 0; right: -$height / 2; @include arrow-right($height / 2, $color); } } .eva { text-align: center; width: 800px; margin: 0 auto; position: relative; color: red; font: 16px/1.4 "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif; h1 { padding-top: 400px; font-size: 5em; transform: perspective(2em) rotateX(-25deg); } } .check { font-size: .4em; height: 30px; line-height: 30px; position: absolute; top: 33px; border: 2px solid #000; z-index: 101; } .god { margin-top: -50px; display: inline-block; width: 0; height: 0; border-left: 65px solid transparent; border-right: 65px solid transparent; border-top: 65px solid red; a { text-decoration: none; color: #FFF; font-size: 1.1em; position: absolute; transform: translate(-50%, -60px); &:hover { text-decoration: underline; } } } .box-lg { display: inline-block; position: absolute; .brand { color: #000; line-height: 100px; font-size: 3em; @include hexagon(350px, 100px); } .bg1 { @include hexagon(354px, 110px, #FFF); position: absolute; top: -5px; left: -2px; z-index: -1; } .bg2 { @include hexagon(358px, 120px); position: absolute; top: -10px; left: -4px; z-index: -10; } } .box-default { display: inline-block; position: absolute; .brand { line-height: 100px; font-size: 1.5em; @include hexagon(70px, 100px); } .bg1 { @include hexagon(74px, 110px, #FFF); position: absolute; top: -5px; left: -2px; z-index: -1; } .bg2 { @include hexagon(78px, 120px); position: absolute; top: -10px; left: -4px; z-index: -10; } } .box-warn { display: inline-block; position: absolute; .brand { line-height: 100px; font-size: 1.5em; @include hexagon(70px, 100px, #000); color: red; } .bg1 { @include hexagon(74px, 110px, #FFF); position: absolute; top: -5px; left: -2px; z-index: -1; } .bg2 { @include hexagon(78px, 120px, red); position: absolute; top: -10px; left: -4px; z-index: -10; } }