Q&A
右上が少し欠けたようなデザインのタイトルをつくりたく、
形はこれでよいのですが、デバイスによっては（iPadなどで）
titleArea::beforeの下に、白い線（隙間でしょうか…）が入ってしまい、これを解消したいです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="mainContents"> <div class="titleArea"> <p class="title">タイトル</p> <p class="subtitle">TITLE</p> </div> </div> <style> p { margin: 0; padding: 0; border: 0; box-sizing: border-box; font-size: 100%; font: inherit; vertical-align: baseline; line-height: 1.5; } .mainContents { padding-top: 20px; width: 100%; } .titleArea::before { content: ""; width: calc(100% - 20px); height: 0; display: block; position: absolute; left: 0; border-bottom: solid 20px black; border-left: solid 20px transparent; bottom: 100%; text-decoration: none; } .titleArea { position: relative; background: black; color: #ffffff; padding-left: 30px; padding-bottom: 5px; height: 60px; font-size: 18px; font-weight: bold; line-height: 1.0em; } .subtitle { font-size: 12px; } </style> </body> </html>
試したこと
横幅のサイズが、小数点になっているからかと思い、サイズ指定をしてみましたが変化ありませんでした。
画面の%表示によるものかとも思ったのですが、実機の表示で線が出てしまうため、原因・解決方法がわからない状態です。
ご教示のほどよろしくお願いいたします。
回答1件
0
ベストアンサー
[1] topの値を指定
CSS
1.titleArea::before { 2 top: -20px; /* 追加してみるといかがでしょうか? 「-19px」にすると隙間は無くせると思います。 */ 3}
[2] box-shadowで隙間を消す
隙間がどうしても消せない場合は、box-shadowで隙間の白い色を塗りつぶすようにするのも、
奥の手としてあり得るかもしれません。
CSS
1.titleArea::before { 2 box-shadow: 0 1px 0 0 black; 3}
投稿2020/06/15 13:11
総合スコア4528
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/06/16 01:11 編集