![見出し画像](https://assets.st-note.com/production/uploads/images/145178724/rectangle_large_type_2_4762dabf6bfdc355c2fb61aacea60915.png?width=1200)
CSSで画像の形が自由自在!
こんにちは。知ってます?バッタって脱皮するんです。
(いきなり、で苦手な方がいたらすみません。…)
うん、そりゃ知識としては知ってたんですけど、
先日、初めて脱皮した”オンブバッタ”の皮を見つけたんですよ!
プランターで育てている”大葉”が虫食いだらけで、
プチプチ抜いていたら、その葉っぱからぴょーんとバッタが飛びまして、
残った葉になんだか白い物体が・・・よくよく見ると、
おお!抜け殻!はじめてみたわ!
![](https://assets.st-note.com/img/1719300027943-UarDNKchUh.png?width=1200)
画像を丸く表示する方法
はい、では
今回は、WEBページやSNSのアイコン表示などで
よく見るまるい画像のやり方を調べました。
まずは基本の画像を丸くするスタイルシートは、
.img {
border-radius: 50%;
}
![](https://assets.st-note.com/img/1719384251716-bps5r5N1ll.png?width=1200)
これ、ですよね。
四隅の外側の角を50%丸める指定をします。
ついでに、四隅それぞれの場合はこれですね。
border-top-left-radius・・・要素の左上の角を指定
border-top-right-radius・・・ 要素の右上の角を指定
border-bottom-left-radius・・・ 要素の左下の角を指定
border-bottom-right-radius・・・ 要素の右下の角を指定
さて、ここからが私の調べもの!
じゃぁ、星ってどうよ?
検索しました!探したよ!
そうしたら、
スタイルシートが違ったよborderじゃなかった
clip-path: polygon() って
パスを指定して、表示する部分をしていするスタイルシートだった
XY座標でパスの位置を指定してる
これ、自分の頭の中で考えていたら相当大変(汗
だけど、見つけたこのサイト
やっぱりあるよね!お助けサイト!
素晴らしい!
CSS Clip-Path Generator
![](https://assets.st-note.com/img/1719294477602-h7XbXXrYQ8.png?width=1200)
すごいよね!
英語読めなくても直感的に操作方法がわかるUI!
座標の色とCSSコードの色が連動しているから、
カスタマイズしても、座標を見失わない!
![](https://assets.st-note.com/img/1719386738827-sdHgQB7qjh.png?width=1200)
すでに沢山の見本があるから、欲しい形がすぐ分かる
このサイトは速攻ブックマークだよね。
おわり
では、今日はこの辺で。
飽きっぽい私がこのマガジンをどこまで更新できるのか!
これで終わるのか!
あたたかい目で見守っててください!
よろしくお願いします!
この記事が気に入ったらサポートをしてみませんか?