VEROU」で紹介されていた、↓みたいにボックスの角にベベルを付ける方法を紹介します。使って背景を4等分します。それぞれの角から斜めの線形グラデーションで、透明を塗りこむことで角を見えなくするというのがこのからくりです。この「等分すれは、複数のグラデーションを指定できる」というテクニックは、他にも応用できそうなので是非覚えておいてください。スタイルはこんな感じです。ベベルを適用したいボックスに設定してください。ベンダープレフィックスは付けていません。完全なものはデモを見てください。部分を変更すると、角の大きさが変わります。色は、ボックスの色の指定になります。丸いベベル元記事では、丸いベベルも紹介されていました。こちらも、同じ要領でグラーデーションの部分を線形ではなく、円形にするだけですね。CSSはこんな感じです。グラデーションを変更することで、色々な表現ができそうです。no-repeat;}ベベルを実現する方法は、その他にもあると思うのですが、この方法では後ろをちゃんと透過するという実用性なメリットがあります。ついては、やっぱり外側の矩形に適応されてしまいました(残念...)。これを使って何かすごいやつをまた作りたいと思いますよー。Tweetnambaど田舎でプログラマーとかWebデザイナーとかやりながらWebサービスを作る人。PHP、jQueryなどの技術系の記事担当してます。がんばって記事を書くので、リアクションしてくれると嬉しいです。スマートフォンスマートフォンからも最新のロケットをチェックできます。同じURLからアクセスできます。記事をチェック基本、毎日記事を書いています。よかったらチェックしてください。素材を最大限に活かすデザインアイデア50。