このようなボックスの作成を行いたいと思い、挑戦しています。
はみ出した線をどうするのかが思い浮かびません。
上に重ね掛けをすればよいのではないかと試したのですが、どうしても線が太くなってしまうことにも気づきました。
ネットで検索をしたのですが、できる可能性は低いのではないかと思ってはいます。
可能か不可能か教えていただけませんでしょうか。
また、可能でありましたら方法を教えていただけませんでしょうか。
html
1<div class="background-1"> 2 <div class="background-2"> 3 <p>あああああああ</p> 4 </div> 5</div>
css
1.background-1{ 2 margin: 12px; 3 position: relative; 4 background-color: #fff; 5 border: 2px solid #333; 6} 7.background-1::before{ 8 position: absolute; 9 content: ''; 10 right: -17.5px; 11 top: -2px; 12 border: 20px solid transparent; 13 //追加コードが必要 14} 15.background-1::after{ 16 position: absolute; 17 content: ''; 18 left: -17.5px; 19 bottom: -2px; 20 border: 20px solid transparent; 21 //追加コードが必要 22}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2020/01/19 23:54