三角形や台形、傾斜など変形した要素の内側に、BOXの形に合わせてテキストや文字を入れられる cssのコードサンプルです。
三角形や台形、傾斜を作るだけなら border や clip-path、transform など色々な方法がありますが、内側のテキストや文字は矩形のまま。。形状に沿って入れる方法ってなかなか見当たりません。
でも shape-outside を使うと、外側の要素を変形したように見せつつ、内側の形に沿ってテキストを入れることが結構簡単にできちゃいます^^
変形BOXの内側にテキストを入れる 【デモ&コード】
以下のような変形BOXのテキストは、実際の形状にテキストを入れているのではなく、shape-outside を利用して、入っているように見せているだけ^^;
左右に図形をフロートさせて、テキストを回り込ませています。
デモ & 簡単な説明
三角形の回り込み。
width: 50% の clip-path を 左右に配置。左右のバランスを変えれば頂点のずれた三角もできます^^
台形は、三角形と同じ clip-path を使って width を変えるだけ。
width の設定で好きな傾斜に変えられます。左右を変えてもOK^^
斜めの変形も、基本は同じ。width で好きな傾斜に変えられます。
「transform:skewX()を背景と中身に別々にかける」といった複雑な指定は必要ありません
左右の clip-path を凹凸で作った矢羽根型の変形BOX。
このようにパスが途中で動く場合は、shape-margin を使わず margin だけで間隔を調整した方がきれいに回り込みます
コード
4種類とも同じコードをベースにして、形状や回り込みの設定のみ変更しています。
使用する場合は「共通設定」をコピペした上で、classを2重掛けに変更し、それぞれのcssを追加してください
共通 設定
<div /* ここにclass追加 */>
<div class="left"></div>
<div class="right"></div>
<p>ここに好きなテキストを記入します</p>
</div>.pgn {
flex: 0 0 400px;
position: relative;
z-index: 1;
margin: 2em 0;
}
.pgn p { /* 図形としてに見える部分 */
height: calc(100% - 2px);
width: calc(100% - 2px);
margin: 1px 0 0 1px; /* 上左を 1px ずらす */
line-height: 1.4;
color: #fff;
background-color: #000; /* 図形部分の背景色 */
}
.left, .right { /* 上に乗せて図形の形を作りつつ回り込みさせる部分 */
height: 100%;
background-color: #fff; /* ページの背景色など */
}
/* この下にそれぞれの図形用cssを記入 */【pgn1 三角形】 追加css
/* class="pgn pgn1" */
.pgn1 { height: 260px; }
.pgn1 :is(.left, .right) {
width: 50%;
shape-margin: 15px;
}
.pgn1 .left {
float: left;
clip-path: polygon(100% 0, 0 0, 0 100%);
shape-outside: polygon(100% 0, 0 0, 0 100%);
}
.pgn1 .right {
float: right;
clip-path: polygon(100% 0, 0 0, 100% 100%);
shape-outside: polygon(100% 0, 0 0, 100% 100%);
}【pgn2 台形】 追加css
/* class="pgn pgn2" */
.pgn2 { height: 230px; }
.pgn2 p { padding-top: 2em; }
.pgn2 :is(.left, .right) {
width: 25%;
shape-margin: 15px;
}
.pgn2 .left {
float: left;
clip-path: polygon(100% 0, 0 0, 0 100%);
shape-outside: polygon(100% 0, 0 0, 0 100%);
}
.pgn2 .right {
float: right;
clip-path: polygon(100% 0, 0 0, 100% 100%);
shape-outside: polygon(100% 0, 0 0, 100% 100%);
}【pgn3 傾斜】 追加css
/* class="pgn pgn3" */
.pgn3 { height: 230px; }
.pgn3 p { padding-top: 1em; }
.pgn3 :is(.left, .right) {
width: 25%;
shape-margin: 15px;
}
.pgn2 .left {
.pgn3 .left {
float: left;
clip-path: polygon(100% 0, 0 0, 0 100%);
shape-outside: polygon(100% 0, 0 0, 0 100%);
}
.pgn3 .right {
float: right;
clip-path: polygon(100% 0, 0 100%, 100% 100%);
shape-outside: polygon(100% 0, 0 100%, 100% 100%);
}【pgn4 矢羽根】 追加css
/* class="pgn pgn4" */
.pgn3 { height: 230px; }
.pgn3 p { padding-top: 1em; }
.pgn3 :is(.left, .right) {
width: 20%;
}
.pgn4 .left {
float: left;
clip-path: polygon(0 0, 0 100%, 100% 50%);
shape-outside: polygon(0 0, 0 100%, 100% 50%);
margin-right: 30px;
}
.pgn4 .right {
float: right;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 99% 50%);
shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%, 99% 50%);
margin-left: 30px;
}コード説明
コードにも説明を入れていますが、書ききれない内容の説明です^^
| 対象 | セレクタ | プロパティ | 説明 |
|---|---|---|---|
| 共通 設定 | .pgn p | height: calc(100% - 2px); | clip-path は外周から微妙にずれて線が出てしまう事があるので 背景色を付けた部分が 1pxづつ小さくなるようにします |
| 追加css | .pgn | height: 230px; | float はテキストなどの可変要素の高さを認識しませんので親box、又は、自身に高さ設定必須です |
| 追加css | left, .right | width, float, | それぞれ指定します。clip-path,shape-outside は、同じ値を記載 |
| 追加css | left, .right | shape-margin, margin | path によって回り込みが違う場合がありますのでどちらをどう使うかは、都度確認が必要です |
レスポンシブ対応
幅は % で指定できるので、レスポンシブもバッチリ^^
ですが、問題は高さ。
テキストは、幅にあわせて改行されていきますが、float はこの高さを認識しないので、親BOXか自身に高さを指定する必要があります。
はみ出しOKなら問題ありませんが、必ずBOX内に収めたい場合、一番簡単なのは はみ出ないよう幅とテキスト量を先に検討しておく事
とは言え、それはなかなか難しい、、となると「高さ 又は font-size を clamp で可変にする」 「テキストを疑似要素に入れて、メディアクエリで書き換える」「jsで高さを書き換える」かなぁ、と思います。