寒い・・・極寒の真夜中に暖房も入れず、
To Be Continued
(↑wpのテーマ変えてcss修正してないから、今表示されなくなってしまった・・・)
CSSでこんなん作った。
ジョジョラベル。
facebookからだとちゃんと表示されなかったので、画像も貼っとく。
技術と根性不足で、枠がうまくできなかった。
フォントは
htmlは
To Be Continued
cssは
.jojo-lbl { display:inline-block; height:25px; width:170px; background:linear-gradient(to right, #FFE74F, #FFB53E); position:relative; margin: 20px 40px 0 25px; } .jojo-lbl:before { position:absolute; content:""; width:0; height:0; border:25px solid transparent; border-right:25px solid #FFE74F; right:170px; top:-13px; } .jojo-lbl span{ font-size: 18px; font-family: 'Freckle Face', cursive; color: #000; display: block; margin: 3px 0 0 10px; }
参考サイト。
[blogcard url="http://while-creation.com/google-webfont-wptheme/"]
[blogcard url="https://qiita.com/F9C/items/4d3e23769485d3309783"]
ちなみに枠線入り...
To Be Continued
(↑wpのテーマ変えてcss修正してないから、今表示されなくなってしまった・・・)
親要素の z-indexコメントしても、擬似要素が上にきちゃう。
.jojo-label { display: inline-block; height: 28px; width: 174px; background: linear-gradient(to right, #FFE74F, #FFB53E); position: relative; margin: 20px 40px 0 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 2px solid #000; border-left-color: #FFE74F; z-index: auto; } .jojo-label:before { position:absolute; content:""; width:0; height:0; border:25px solid transparent; border-right:25px solid #000; left:-48px; z-index: −1; top:-13px; } .jojo-label:after { position:absolute; content:""; width:0; height:0; border:20px solid transparent; border-right:20px solid #FFE74F; left:-40px; top:-8px; z-index: −1; } .jojo-label span{ font-size: 18px; font-weight: 600; color: #000; display: block; margin: 3px 0 0 10px; font-family: 'Freckle Face', cursive; }