【css】Border-radiusを使った歪な形の作り方

どうも、トッド(Todd)です。

とあるWEBページを見ていたところ、CSSプロパティであるBorder-radiusの活用方法について触れて書かれているところがありまして、良いなと感じたので自分のブログでも取り入れてみることにしました。

とあるWEbページ↓

参考 記事のタイトルColiss

プロフィール欄のイメージ画像のフレームであったり(主に丸い画像のとき)、見出しのデコレーションに角丸表示にカスタマイズしたりと使いどころに幅のあるCSSプロパティー「Border-radius」を使って少し歪な形にしたデザインを使用して遊んでみました。

今回は、『Border-radius generator』というサービスをしようしてみたところ一味違う形状の作成が簡単にできたので参考になればと思い、書いていきます。


「デベロッパーツールなんかを使って、Border-radiusの値をちょくちょく打ち込んで改変しながらでも良いと思いますが、それは慣れている人でなければ難しい調整であるようにも思えます。」

っていう部分において、共感してもらえる人であれば上の方で紹介しました、Border-radius generatorは便利なツールであることを感じてもらえると思います。

使い方を説明するまでもなく簡単に操れるので気になった人は訪れに行ってもらうと分かります。

今日は試しにちょっと自分のWEBページで取り入れてみました。↓

【ビフォー】

【アフター】

Border-radius generatorを使っていい感じに歪な形に仕上げたところで、その値をコピペしてデザインの変更をしてみました。

こんな感じで遊べますので気になりましたら試してみてください。

最後まで読んでいただき有難うございました。

Fin.

コメントを残す

メールアドレスが公開されることはありません。