【CSS】斜めデザイン実装 【三角を作る+positionで実装】

コーディング
スポンサーリンク

コードのコピー

See the Pen
yLJGyXx
by nzm (@nzm)
on CodePen.

 

作り方

まずはいつも通りシンプルな見出しを書きます。
marginやpaddingの余白に邪魔されないように初めに余白リセットしています。

See the Pen
YzWdzmz
by nzm (@nzm)
on CodePen.

CSSで三角を作る方法

三角といっても今回は正三角形でなく、一つの角が90度の三角なのでまずはこのように作ります。
例として黒とピンクで作ってみました。
border-widthの80pxが黒の部分で 50pxがピンクの部分です。
ここ大きさはこれから繋げる見出しの部分の大きさに合わせて調節します。

See the Pen
dyXwPvo
by nzm (@nzm)
on CodePen.

擬似要素で三角を作る

上のような三角を擬似要素で作っていきます。
わかりやすように距離を少し離してみました。

See the Pen
zYByxRV
by nzm (@nzm)
on CodePen.

 

positionを使ってくっ付ける

三角マークができたらあとはpositionを使ってくっつければOKです。
先ほどの見出し部分にはposition:relative;
擬似要素で作った三角マークにはposition: absolute;を付けてtopやleftで位置の指定をします。

border-widthで指定した横幅分を、マイナスrightで位置調整すれば完成です。

コメント

タイトルとURLをコピーしました