CSS note

HTML

<div class="wrapper">
 <a href="https://tenman.info/labo/css/files/bouquet.jpg">
 <img src="https://tenman.info/labo/css/files/bouquet.jpg" alt="bouquet" width="1920" height="1203" class="promo alignnone size-full wp-image-3677" />
 </a>

<p class="link">
 <a href="https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms">
 <span class="google-font-lobster "> Angled Edges with CSS Masks and Transforms</span>
 </a>
</p>
</div>

CSS

.wrapper{
 background:#000;
 height:1000px;
}
.promo {
 -webkit-clip-path: polygon(0 0, 1920px 0, 1920px 87%, 0 100%);
 clip-path: polygon(0 0, 1920px 0, 1920px 87%, 0 100%);
}
.link{
 font-size:48px;
 text-align:center;
 margin:100px 0;
}
.link span{
 color:rgba(194,199,109,1);
 display:block;
 transform: rotate(-3deg);
}

新着記事