斜めのコーディング

斜めにコンテンツをデザインしたものを
たまに見かけます。
以前LPのコーディングをした時に苦労しました。

今回はコーディング方法を解説していきます。

See the Pen
斜めのLP by studio-0 (@studio-0)
on CodePen.

HTML

斜めになるコンテンツ全体をp-top__mvで囲んでいます。

<div class="p-top__mv">
	<h2 class="logo"><span><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/logo-1.png" alt="クリプラス"></span></h2>
	<figure class="img"><img src="https://studio-0.com/blog/wp-content/uploads/2020/04/001.jpg"></figure>
	<div class="txt">
		<h3 class="catch01"><img src="https://www.y-create.co.jp/dispatch/lp/cplus/common/images/oneday01.svg" alt="ONEDAY+"></h3>
		<p class="catch02"><img src="https://www.y-create.co.jp/dispatch/lp/cplus/common/images/oneday02.svg" alt="1日だけ・1日から"></p>
		<p class="desc">
			フリーランスで活動中のデザイナーの方や<br class="u-pc-view">
			転職活動中のクリエイターの方など<br class="u-pc-view">
			気軽に副業として働けます。<br class="u-pc-view">
			安心翌月払いのクリエイティブのお仕事として<br class="u-pc-view">
			もう一歩プラスのサービスをクリプラスが提供します。<br class="u-pc-view">
			あなたも「クリプラス」を有効活用しませんか？
		</p>
	</div>
	<div class="blanks">
		<ul>	<li><a href="http://www.y-create.co.jp/dispatch/lp/cplus/client/" target="_blank" class="c-btn c-btn--mv">企業の方は<br class="u-sp-view">こちら</a></li>
			<li><a href="https://www.y-create.co.jp/" target="_blank" class="c-btn c-btn--mv">株式会社<br class="u-sp-view">ユウクリ</a></li>
		</ul>
	</div>
</div>

CSS

コンテンツ下部の斜め部分は.p-top__mv:afterになります。

img {
    vertical-align: top;
    width: 100%;
    height: auto;
}
.p-top__mv{
position:relative
}

.p-top__mv:before{
content:'';display:block;width:0;height:0;border-style:solid;border-width:0 0 100vh 30vw;border-color:transparent transparent #ffdb00 transparent;position:absolute;right:0;bottom:0
}

.p-top__mv:after{
content:'';display:block;width:0;height:0;border-style:solid;border-width:10vw 0 0 100vw;border-color:transparent transparent transparent #fff;position:absolute;left:0;bottom:0
}

.p-top__mv .logo span{
display:block;width:12.5vw;
  position:absolute;left:4.5vw;top:5vh;z-index:3
}

.p-top__mv .logo span img{
  width:100%;
}

.p-top__mv .logo:before{
content:'';display:block;width:0;height:0;border-style:solid;border-width:90vh 0 0 25vw;border-color:transparent transparent transparent #ffdb00;position:absolute;left:0;bottom:0
}

.p-top__mv .logo:after{
content:'';display:block;width:0;height:0;border-style:solid;border-width:75vh 30vw 0 0;border-color:#fff transparent transparent transparent;position:absolute;left:0;top:0
}


.p-top__mv .txt{
position:absolute;right:30px;bottom:90px
}

.p-top__mv .txt .catch01{
width:30vw
}

.p-top__mv .txt .catch02{
width:25vw;margin:30px 0 15px
}

.p-top__mv .txt .desc{
font-size:1.32812vw;font-weight:700
}

.p-top__mv .blanks{
position:absolute;right:0;top:0
}

.p-top__mv .blanks ul{
font-size:0;text-align:right
}

.p-top__mv .blanks li{
display:inline-block;margin:0 0 0 8px
}

.p-top__mv:after{ 
content:'';
display:block;
width:0;
height:0;
border-style:solid;
border-width:10vw 0 0 100vw;
border-color:transparent transparent transparent #fff;
position:absolute;
left:0;
bottom:0 
}

width:0; 
height:0; 
border-style:solid; 
border-width:10vw 0 0 100vw; 
border-color:transparent transparent transparent #fff;

これで白い三角形を作っています。