CSSで表現する電源コンセントプラグの作り方

こんにちわ。nap5です。

CSSで表現する電源コンセントプラグの作り方の一つを紹介したいと思います。

ネットサーフィンしてたまたま見つけたこの記事の電源コンセントUIがSVG製だったので、CSSで表現したらどうなるかなと思って挑戦した記録になります。見つけてから30分ぐらいで書いたので、やっつけ感はあります。

https://inclusive-components.design/toggle-button/

完成するUIは以下のようなイメージになります。

CodePenに動作確認できるサンプルを置きました。

実装のポイントは台形の部分です。これはツールチップの三角形などでよく使われていそうなborderプロパティのテクニックを利用しています。

あとは、プラグされたときとアンプラグされたときでクラスの着脱衣をtoggleで行ってそれっぽく表現しています。

パーセンテージと色味の変化をtransitionすればローディング中の表示にでも応用できるかもしれません。

簡単ですが、以上になります。