ミギムキ

[CSS] 「個別の十一人」のロゴをCSSで描いてみる

やりたいこと

サンプルコード

html

<head> <link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet" /> </head> <div class="individual_11"> <p>仇</p> <p>士</p> </div>
スポンサー広告

CSS

.individual_11 { position: relative; width: 400px; height: 400px; } .individual_11:before { display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); width: 240px; height: 240px; border: 18px solid #000; content: ""; } .individual_11:after { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: scaleY(0.8); font-size: 300px; line-height: 420px; text-align: center; content: "∞"; } .individual_11 p { position: absolute; left: 50%; transform: translateX(-50%); padding: 0px; margin: 0px; font-size: 60px; font-weight: bold; font-family: "Sawarabi Mincho"; } .individual_11 p:nth-child(1) { top: 60px; } .individual_11 p:nth-child(2) { bottom: 60px; }

仕組み、解説、補足など

スポンサー広告