ミギムキ

[CSS] ユーザーアイコンをCSSだけで描きたい

CSSで描いたユーザーアイコン

サンプルコード

html

<span class="user"></span>
スポンサー広告

CSS

.user { display: inline-block; position: relative; border-radius: 50%; background-color: #89baeb; width: 1em; height: 1em; font-size: 200px; overflow: hidden; } .user::before, .user::after { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 50%; background-color: #3388dd; content: ""; } .user::before { top: 0.15em; width: 0.4em; height: 0.4em; } .user::after { bottom: -0.4em; width: 0.8em; height: 0.8em; }
  • before疑似要素で頭の部分を、after疑似要素で体の部分を描いています
  • どちらも「border-radius: 50%;」で要素を丸型にします。体の部分が大枠の円からはみ出ても大丈夫なように「overflow: hidden;」ではみ出した部分を非表示にしています

CSSでアイコンを描いてみるシリーズ

スポンサー広告