AWS Simple Icons のセキュリティグループの赤黒の囲みを CSS で再現してみた

• CSS Security Group

非常に地味な話なんですが、AWS Simple Icons ではセキュリティグループを赤と黒のボーダーによる枠線で囲むことになっており、シンプルでかっこいいので HTML+CSS で実現できないかなーと思って色々試していたらそれっぽいものができたので書いておきます。こんな感じのやつ。

security group

ソースは上記リンクのページに載っています。CSS に詳しくないので他のスタイルシートと組み合わせるとうまく描画されないとか色々あるかも。昔から CSS 苦手なので勉強したいと思った。