CSSだけのちょっと気の利いたボックスデザイン。borderを面取りして四隅に隙間を作る方法

久しぶりにCSS(というか初めて)。
最近は、デザインをCSSでやりくりすることが増えてきましたね。
昔はテキスト画像を作ったり、背景の繰り返し画像を作ったり、
色々めんどくさかったですけど、便利な世の中になりました。

先日こんな感じのボックスデザインをコーディングしました。

両端に隙間を作って、ちょっとおしゃれにしてます。
レスポンシブにも対応してるので、調整も簡単です。

See the Pen
eYmLzaN
by 伊藤 慎 (@mako110)
on CodePen.

要するに、ボックスをposition:relative;にしておいて、
四隅に白スペースをabsoluteでおいてます。

ちょっと無意味なhtmlが入るのが気に入らないけど。。
もっといい方法があればよいですけどね。

それにしても、コードペンめっちゃ便利ですね。

自分のコードとデモを簡単に公開できます。
せっかくなので、今後CSS系も載せていこうと思います。

それでは。

この記事を書いた人

mako110

原宿でWEBディレクターをやっています。
WEB業界に携わって約15年。独立して7年目です。
自分らしく、働きやすく、周りの人の役に立つ。
そんな仕事をゆるゆるとやっています。