下記画像のような、各線の長さや傾きが異なるテキストボックスを作りたいです。
四角形のテキストボックスを作り、個別に線を傾けてmarginなどで調整することで実現できると考えているのですが、「transform:skew(20deg);」を1つ入れると、全部のborderが変わってしまいます。
borderを個別にtransformで指定できていないことが原因と考えているのですが、指定方法がわからず詰まっています。個別に変更し、想定したとおりの図形を描くにはどうすればよいでしょうか?
現在のコードは以下の通りです。複数行使うことも考慮し、htmlは3行分改行しています。
CSS
.box { padding: 0.5em 1em; margin: 2em 0; font-weight: bold; border-top: solid 3px #000000; border-left: solid 3px #000000; border-right: solid 3px #000000; border-bottom: solid 3px #000000; } .box p { margin: 0; padding: 0; }
HTML
<div class="box"> <p>Text <br>text <br>Text</p> </div>
回答4件
あなたの回答
tips
プレビュー