CSS note

続・CSSだけでviewportに常に対角線を引く

HTML

<div class="test">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget faucibus odio. Quisque posuere tortor a dolor cursus, sit amet semper ex venenatis. Proin vitae rhoncus nibh, semper sodales lacus. Aenean at justo vitae justo sodales pharetra tempor sit amet sem. Sed ultricies ligula metus, non porta libero maximus at. Phasellus finibus purus mollis.</p>
</div>

CSS

.test {
 background: url(https://tenman.info/labo/css/files/VanGogh_1887_Selbstbildnis.jpg) no-repeat center center;
 background-size: cover;
 width:600px;
 height:0;
 padding-top:50%;
 padding-bottom:50%;
 max-width:100%;
 position:relative;
 color:#aaa;

}
.test:after {
 content: "";
 z-index: 0;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: linear-gradient(to left bottom, transparent 49.9%, #fff 50%, transparent 50.1%);
}
.test:before {
 content: "";
 z-index: 0;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-image: linear-gradient(to right bottom, transparent 49.9%, #fff 50%, transparent 50.1%);
}
.test p{
 max-width: 50%;
 position:absolute;
 top:25%;
 left:0;
 right:0;
 bottom:25%;
 margin:auto;
 background:rgba(0,0,0,.3);
 padding:2em;
 box-sizing:border-box;
 overflow:hidden;
 z-index:1;
}

新着記事