2

この記事では、CSSで作成できるいくつかの形状を示します。正方形、長方形は、図形内にテキストを追加することを簡単にサポートします。楕円と円はテキストを切り取ります。三角形にはテキストが表示されません。ハートはその背後にあるテキストを示しています。また、テキストが追加されたため、ダイヤモンドはもはやダイヤモンドではないように見えます。

これらのCSSシェイプにテキストを追加するための適切な方法はありますか？フローティングdivを使用してテキストを別の要素のCSSShape要素に配置するよりも簡単な方法はありますか？

いくつかの結果の例：http：//jsfiddle.net/EVBYt/

4

1 に答える 1

2
  • CSSの形、
  • CSS形式のセーフゾーンのテキストと
  • テキストが利用可能なスペースを可能な限り埋めるCSS形状のテキスト

3つの非常に異なる獣です！

参照する形状は、1つの制約で作成されます。1つの要素が使用されます。これにより、場合によっては、背景色が疑似要素に完全に適用された0x0pxの要素になります。明らかに、これらの場合、テキストは正しく表示されないため、他の方法でこれらの図形を完全にやり直す必要があります。

CSSリージョンは、AdobeによってW3Cに提案されています。標準化と実装を数年待つだけです:)

この長い待ち時間の間、約10年前に空白のdivで遊んだTantekCelikとEricMeyer（例： http： //meyerweb.com/eric/css/edge/curvelicious/demo.html）はまだ関係があります。IE8でユーザーがより大きなテキストを選択した場合、またはFirefoxで単一レベルのズームテキストを使用した
場合に爆発するデザインを実現したい場合。多分流体サイジングで？em

テキストをこのような複雑な形にスタイリングする必要がある場合は、 SVGを使用します。

于 2012-09-30T22:41:19.950 に答える