CSSで中途半端なジョジョのTo Be Continued を作ってみる

寒い・・・極寒の真夜中に暖房も入れず、

（↑wpのテーマ変えてcss修正してないから、今表示されなくなってしまった・・・）

CSSでこんなん作った。

ジョジョラベル。

facebookからだとちゃんと表示されなかったので、画像も貼っとく。

技術と根性不足で、枠がうまくできなかった。

フォントは

Google Fonts

htmlは

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;
}

参考サイト。

while-creation.com

 

1 Share

8 Pockets

» GoogleのWebフォントをWordPressテーマで使う方法

http://while-creation.com/google-webfont-wptheme/

Qiita

 

2 Pockets

画像を使わずに枠線（ボーダー）つきの矢印をcssで表現する - Qiita

https://qiita.com/F9C/items/4d3e23769485d3309783

cssで矢印を表現するためのコードを紹介してるサイトは結構ありますが、ボーダーあり矢印→のコードを紹介しているとこが少ないので、べた塗りと枠のみ両方メモしておきます。!(https://qiita-i...

ちなみに枠線入り...

（↑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: −１;
    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: −１;
}
.jojo-label span{
    font-size: 18px;
    font-weight: 600;
    color: #000;
    display: block;
    margin: 3px 0 0 10px;
	  font-family: 'Freckle Face', cursive;
}