どうも、ソエです。

今回は、border-radiusで私が知らなくて驚いたコードをご紹介します。

では、どうぞ!

どんなコード?

どんなコードなのか、まずは見てみましょう。

div{
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

普通に使っていると、こんなに~%なんて書かないですよね?
でも、この書き方でもborder-radiusは効くんです。

どんな円が出来るのか

先程書いたコードで、どんな円が出来るのか見てみます。

ま~るい円ではなく、歪な円が出来ました!
これで流体シェイプを使うサイトを作れる、というわけですね!

終わりに

いかがでしたか?
知らなかった人はかなり驚くのではないでしょうか。

私は知らなかったので、かなり驚きました。
しかし、これでサイトのアイデアの幅が広がりました!

これからじゃんじゃん使ってみて下さい。

ご閲覧ありがとうございました!

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ CSS/

border-radiusには、こんなコードがあった!