css - 回転した Div 内でテキストを折り返す

Question

回転したdiv内でテキストを折り返す方法を教えてください。回転した後、テキストは div 内に留まりません。これがアイデアの画面です...

前もって感謝します..

Answer 1

この問題を解決するために頭に浮かぶのは、CSS リージョン ( http://html.adobe.com/webstandards/cssregions/ ) だけです。

それがどのように機能するかを示すために、小さなデモをセットアップしました。コードは次のとおりです。

div {
    -webkit-shape-inside: polygon(0% 50%, 50% 100%, 100% 50%, 50% 0%);
}

そして、ここにデモがあります: http://jsfiddle.net/sandro_paganotti/ABdgB/ .

残念ながら、これは最新の Chrome でしか機能しません。また、chrome://flags パネルで「実験的な WebKit 機能を有効にする」を手動で有効にする必要があります。