Q&A
前提・実現したいこと
オワタの両手をCSSで表現したいです
実際はオワタの手ではなく、見出しとして使いたいです
該当のソースコード
<DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ドキュメント無題</title> </head> <body> <h1>＼見出し／</h1> </body> </html>``` ### 試したこと 斜線 CSS、斜線 CSSで検索
回答2件
0
ベストアンサー
素直に行うなら、以下のようにすることで質問者さんが実現したいことを行えると思います。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style> 7 h1::before { 8 content: '＼'; 9 } 10 11 h1::after { 12 content: '／'; 13 } 14 </style> 15</head> 16<body> 17<h1>見出し</h1> 18</body> 19</html>
が、一応別の方法もいくつか書いておきます。
liner-gradientプロパティを使う方法
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style> 7 h1::before, h1::after { 8 display: inline-block; 9 width: 25px; 10 height: 25px; 11 content: ''; 12 } 13 14 h1::before { 15 background: linear-gradient(to right top, #fff 50%, #000 50%, #000 55%, #fff 55%, #fff); 16 } 17 18 h1::after { 19 background: linear-gradient(to left top, #fff 50%, #000 50%, #000 55%, #fff 55%, #fff); 20 } 21 </style> 22</head> 23<body> 24<h1>見出し</h1> 25</body> 26</html>
transformプロパティを使う方法
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>タイトル</title> 6 <style> 7 h1::before, h1::after { 8 display: inline-block; 9 width: 25px; 10 height: 25px; 11 content: ''; 12 border-top: 2px solid #000; 13 } 14 15 h1::before { 16 transform: rotateZ(45deg); 17 transform-origin: left center; 18 } 19 20 h1::after { 21 transform: rotateZ(-45deg); 22 transform-origin: right center; 23 } 24 </style> 25</head> 26<body> 27<h1>見出し</h1> 28</body> 29</html>
投稿2018/03/31 07:14
編集2018/03/31 07:20
総合スコア14731
0
javascriptタグがついているのに気づいて、ちょっと不安になりますが、こんな感じで。
HTML
1<h1>見出し</h1>
CSS
1h1::before{ 2 content:"＼"; 3} 4h1::after{ 5 content:"／"; 6}
投稿2018/03/31 07:13
総合スコア37437
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。