[CSS]border-radiusを使って、角丸ではなく落書き風にボーダーをデザインするテクニック
Post on:2013年4月19日
sponsors
角丸を指定できるborder-radiusで、ボーダーを落書き風にすることもできます。
色によっては、蛍光ペンや絵筆みたいにもできますね。
HTMLはdiv要素が一つだけで、ボーダーも単にborderとborder-radiusを使用しているだけです。
デモページ
※リンク切れ
実装は、こんな感じです。
HTML
要素はdivだけ、入れ子もラッパーも必要ありません。
<body>
<div>
This is my paragraph. Like my border? This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?This is my paragraph. Like my border?
</div>
</body>
CSS
落書き風のボーダーを実現しているのは、border-radiusです。
スラッシュで区切ることにより、水平と垂直方向の半径を設定しています。
div {
border:solid 5px #0ff;
width:200px;
margin:25px auto;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
padding:10px;
}
半径にこんな大きな値を使ったことなかったｗ
sponsors
