株式会社アプリコットデザイン株式会社アプリコットデザイン

tel.0120-622-835

営業時間/10:00〜18:00 定休日/土日祝日

tel.0120-622835

営業時間/10:00〜18:00 定休日/土日祝日

  • instagram
  • facebook

BLOGスタッフブログ

トップページ > ブログ > ~CSSのネタ帳~歪む角丸編

~CSSのネタ帳~歪む角丸編

UPDATE : 2019.11.11

CATEGORY :
Sato
Sato

Sato

cssにborder-radiusというプロパティがあります。
要素の角丸を指定することができ、「正円」や「角丸長方形」を表現するのに良く使用しています。

.circle{
width: 100px;
height: 100px;
background: #dd0;
border-radius: 50%;
}
.round{
width: 100px;
height: 100px;
background: #cdc;
border-radius: 15px;
}

このborder-radius、四隅それぞれに半径の値を指定することが出来るので、複雑な形も作ることが出来ます。
border-radius: 20px 30px 60px 80px;
(指定の順番は左上、右上、右下、左下)


さらにパラメーターをスラッシュで区切ることによって、水平方向の半径と垂直方向の半径を指定することが出来ます。
border-radius: 30px 0 0 0 / 50px 0 0 0;
border-radius楕円の角丸

border-radiusは画像にも指定出来るので、cssだけで画像を角丸でトリミングすることも出来ます。
前回のブログでも触れましたが、~CSSのネタ帳~フォトアルバム風
歪んだ形で切り抜かれた画像を透過pngで書き出すより、正方形の画像をjpgで書き出したほうが容量を軽く抑えられるというメリットがあります。(写真や複雑なイラストの場合)
jpgとpngの比較

正方形画像+border-radiusで再現したものがこちら
.shimeji{
border-radius: 41% 59% 48% 52% / 52% 50% 50% 48%;
}

ビミョーに歪んだ形でトリミング出来ました。
正円よりもゆるっとした印象になりますね。


値だけ見てもどんな形が出来るか想像しづらい…ですよね。
なんと実際に形を見ながらborder-radiusの値を作ってくれる素晴らしいジェネレーターがありますのでご紹介いたします。
いじっているだけでなんだか楽しいのでぜひ遊んでみてください!

FANCY-BORDER-RADIUS
FANCY-BORDER-RADIUS

この記事を書いた人Who wrote this blog

Sato Tomoe

核心をツク鋭い感性を持つ
デザイナー系WEBエンジニア

RELATED POST関連する記事

CONTACTお問い合わせ

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

  • 信州ファームデザイン
  • 信州ファームマーケット
  • 株式会社POCKET
  • 株式会社Think for Design