パターン1:両側に同じ向きの斜め線
1.柴犬の好きな遊び
HTML
<h1>1.柴犬の好きな遊び</h1>
CSS
h1{
padding-left:1em;
font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}
h1::before, h1::after{
position:relative;
display:inline-block;
content:"";
background:#333;
width: 1px;
height: 2em;
transform: rotate(40deg);
top:0.5em;
left:-0.5em;
}
h1::after{
left:1em;
}
パターン2:両側に開くように斜め線
1.柴犬の好きな遊び
基本的にパターン1の左側を逆にすればいいだけです
あとはmarginやpositionでバランスを取ります
HTML
<h1>1.柴犬の好きな遊び</h1>
CSS
h1{
padding-left:1em;
font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
}
h1::before{
position:relative;
display:inline-block;
content:"";
background:#333;
width: 1px;
height: 2em;
transform: rotate(-40deg);
top:0.6em;
left:-0.8em;
}
h1::after{
position:relative;
display:inline-block;
content:"";
background:#333;
width: 1px;
height: 2em;
transform: rotate(40deg);
top:0.6em;
left:1em;
}
パターン3:アクセント風の斜め線
アクセント的な感じの斜め線です
この位置じゃなくてもいいですが
こんな感じでどこにでも入れられるということで
1.柴犬の好きな遊び
HTML
<h1>1.柴犬の好きな遊び</h1>
CSS
h1{
font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;
padding: 0.5em 0.5em 0.5em 1.5em;
border: 1px solid #333;
position:relative;
}
h1::before{
display:inline-block;
content:"";
position:absolute;
top:-1em;
left: 1.2em;
width: 1px;
height: 2.5em;
background:#333;
transform: rotate(45deg);
}
コメント