ソースコード

・ゆゆさん「「罰を待つ」に合わせられるような画像無しのモノクロでシンプルなトップページ。」

自動改行“しない”で作成しています。
わざとタグミスしていますので、ご注意ください。
高さについて、可変ではありませんので、ご使用の際に調整していただくことがあります。HEAD内.contents{～}、.top:bofer{～}、.top:after{～}部分のheightの値などを文章量等に合わせて改変ください。
HEAD

@import url('https://fonts.googleapis.com/css?family=Glegoo');

@font-face
{
font-family: はんなり明朝;
src: url('https://cdn.leafscape.be/hannari/hannari_web.woff')
     format("woff");
}

body{
font-family:"Glegoo","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:200%;
color:#000;
background:#efefef;
margin:0;
padding:0;}

@media screen and (min-width: 401px){
.wrp{
width:400px;
margin:0 auto;}
}

@media screen and (max-width: 400px){
.wrp{
width:100%;
margin:0 auto;}
}

.top{
position:relative;
overflow:hidden;
margin:30px 0 0;
padding:0;
}

.top:before{
content:'';
position:absolute;
top:0;
left:0;
width:120%;
height:300px;
margin:20px -10% 0;
background:#fff;
-webkit-transform-origin:left center;
-ms-transform-origin:left center;
transform-origin:left center;
-webkit-transform:rotate(3deg);
-ms-transform:rotate(3deg);
transform:rotate(3deg);
z-index:-1;
}

.top:after{
content:'';
position:absolute;
top:0;
left:0;
width:120%;
height:300px;
margin:20px -10% 0;
background:#000;
-webkit-transform-origin:right center;
-ms-transform-origin:right center;
transform-origin:right center;
-webkit-transform:rotate(-3deg);
-ms-transform:rotate(-3deg);
transform:rotate(-3deg);
z-index:-2;
}

.contents{
height:300px;
margin:0 auto;
padding:80px 20px 20px;
color:#000;
}

.menu{
text-align:center;
margin:5px 10px 20px;}

.menu a{
background:#000;
color:#fff;
border:solid 1px #000;
padding:0 5px;
margin:5px;}

.menu a:hover{
background:#fff;
color:#000;
border:solid 1px #000;
padding:0 5px;
margin:5px;}

.info{
margin:5px 10px 10px;}

.info p{
text-align:center;
margin-bottom:20px;}

hr{
border:none;
height:10px;
background-image:linear-gradient(hsla(0, 0%, 0%, 1),hsla(0, 0%, 0%, 1) 33.33%,hsla(0, 0%, 0%, 0) 33.33%,hsla(0, 0%, 0%, 0) 100%);
background-size:100% 3px;
width:40px;}

h1{
color:#000;
font-family:はんなり明朝, sans-serif;
font-weight:normal;
font-size:24px;
margin:5px 0 20px;
padding:0 5px 5px;
text-align:center;}

a{
color:#000;
text-decoration:none;
padding:0 3px;
border-bottom:solid 2px #efefef;
transition:0.5s;
}

a:hover{border-bottom:solid 2px #000;}

</style>

BODY

- ALICE+ -