各線の長さが異なる台形型のテキストボックスを作りたい

Question

下記画像のような、各線の長さや傾きが異なるテキストボックスを作りたいです。

四角形のテキストボックスを作り、個別に線を傾けて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>

Comments

[maisumakun]

「Text」は変形していませんが、それで大丈夫なのでしょうか。それとも、形に合わせて変形させたいのでしょうか。

[nasama]

Textは変形させないまま外枠だけを変形させたいと考えています。記載した変更方法だと外枠を変形させると同時に中のTextまで変わってしまうので、Text部分のみ「transform:skew(-20deg);」のように、逆の数値を指定することで戻すつもりでいました。

Answer 1

対応ブラウザの多さ、調整のしやすさを考慮するとSVGを使うのはどうでしょうか。
SVGは、Illustrator等のベクター画像編集ソフトウェアを使わずとも、
以下のようにテキストエディタでの編集もできます。

<!--?xml version="1.1" encoding="utf-8"?-->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 512 512" style="width: 512px; height: 512px; opacity: 1;">
	<path d="M 0 0 L 512 16 L 498 48 L 16 64 L 0 0" stroke="#000000" fill="transparent" stroke-width="2" />
</svg>

こちらをborder.svgといったような名前で保存して画像ソフトかブラウザで開いてみてください。
各辺の長さが異なる四角が表示されるかと思います。

背景として使うなら、CSSにbackground-size: 100% 100%;とすればレスポンシブに対応しつつ、2行以上になっても問題ないはずです。（ブラウザによってバグがあるかも。その時は調べれば解決法が出ると思います。）

#簡単なSVGの記述内容の説明
線の角度調整したいこともあると思うので軽く説明します。
正直蛇足感があるので、読まなくても結構です。
今回はd="M 0 0 L 512 16 L 498 48 L 16 64 L 0 0"の部分に関して説明します。

英数字が羅列してあるように見えますが、この記述が図形を決めています。
「英字」「数字」「数字」を1グループと考えるので、今回は5グループに分けられます。
1グループは1つの指示です。
SVGというキャンバス上に、指示を待っている「点」が1つあると考えてください。
以下はその「点」への指示です。

最初のM 0 0は、x座標「0」、y座標「0」に「M」移動
次のL 512 16は、x座標「512」、y座標「16」まで「L」線を引く
次のL 498 48は、x座標「498」、y座標「48」まで「L」線を引く
次のL 16 64は、x座標「16」、y座標「64」まで「L」線を引く
次のL 0 0は、x座標「0」、y座標「0」まで「L」線を引く

先述の通り「点」は1つしかありません。
例えばL 512 16という指示の後、点は線を引いた後の地点x=512,y=16からL 512 16の指示を行うことになります。
それにより今回の場合は、ずっと「L」で線を引いているので一筆書きのようにつながって描画されます。

---

以上でやりたいことはできるかと思います。

Comments

[nasama]

ありがとうございます。「path d」の下の行に「<text x="20" y="40" font-size="30">」を追記して任意の文字を入力することで期待した通りの動作になりました。

Answer 2

このようなサイトを利用していろいろと試してみてはどうでしょうか？
http://ds-overdesign.com/transform/matrix3d.html

Answer 3

以下ページのようなCSS指定で実現できませんか？

https://qiita.com/mochizukikotaro/items/f0a2ff58bc28dd48f45b

Answer 4

後もうちょっとかな。後はCSSに詳しい方、なおしてください。
clip-pathでBorder指定なさそうなので…

• position: relative;で作成後にposition: absolute;
• 少し小さめで同じパス作成して切り抜けばOKと思います

<style>
  input
  {
    background: cornflowerblue;
    border: none;
    display: inline-block;
    font-size: 130%;
    height:2em;
    margin: 5px;
    clip-path: polygon(0% 10%, 100% 50%,95% 100%, 2% 95%);
  }
</style>

<input type="text" value="test value" />