リンクブロックに紙がめくれたようなCSSを追加する
公開：2019.09.13
更新：2019.09.14
こんにちは、らいどらです。
今回は関連記事スタイリング第二弾です。
おしゃれなサイトさんでたまに見る、ブロックの角に紙がめくれたようなCSSがついてるやつ！ずっとやってみたいと思ってたので、ブロックの余白をごまかすためにもつけていきたいと思います！
目次
やり方
手法としては疑似要素の:beforeや:afterを使って、めくりを付けるブロックの角に別のブロックを作り、そのブロックのCSSをいじっていくという形になります。
ではやっていきます。
私の場合は右下に付けたいので:afterを使います。
.single .kkfield .yarpp-thumbnails-horizontal a:after {
content: "";
position: absolute;
display: block;
width: 0;
bottom: 0;
right: 0;
border-style: solid;
border-width: 16px 16px 16px 16px;
}
実践検証↓
注意点としては、親ブロックにpositionを指定してないとこの黒ブロックがワープします。私も迷子のブロック君めっちゃ探しました………。
スタイリング
配置が確認出来たら、次はスタイリングの番です。
基本的には疑似要素ブロックのborderを使ってスタイリングしていきます。まずは色！と言いたかったのですが、私もborder周りのCSSはあまりいじったことがないので、探り探りやっていきます。
border-colorのみいじった実験になります。右下のCSSがそれ。やっぱり完全に理解できたとは言い難いですが、手探りでやっていきましょう。
それっぽくなりました。同時にbottomとrightをいじって、親ブロックのborderを隠してます。
あとは丸みを作れば完成かな？ border-radiusで丸みをいじって……
はい！完成です！
と、おっとスマホ版の レイアウトもしなきゃですね。CSSを調整して…..
はい！スマホ版も完成です！
まとめ
意外とすんなりいきましたね。個人的にはbottomやrightのabsolute的な仕様を理解するのが一番難しかったかも……。
丸みをつけるあたりでめくれ加減が良い感じになってとっても良かったです！！（語彙力）
もっとこだわりたい人は影とかつけても面白いかもしれませんね(*^^*)
それでは！
参考記事 → https://coliss.com/articles/build-websites/operation/css/css-tutorial-folded-corner-effect.html
