1

この効果 (http://igdaloff.com/mission.jpg) が CSS で可能かどうか疑問に思っています。文字全体を弧を描くことができることは知っていますが、単語の上部を平らに保ち、下部だけを弧を描くことが可能かどうかに興味があります. Illustrator/Photoshop での効果は、アッパー アークまたはロワー アークと呼ばれます。

http://igdaloff.com/mission.jpg

どんなガイダンスも大歓迎です。

4

1 に答える 1

0

そうではありませんが、私が考えることができる唯一のことは、以下の例のように各文字にクラスを配置することですが、それは最善ではありませんが、途中で機能します. 現在のところ、css を使用してテキストを曲げるだけの方法はありません。これは厳密に長方形であるため、実際にはテキストの長方形のプロパティを回避することしかできません。

<html>
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
.level1 {margin-top:0px !important; position:absolute;}
.level2 {margin-top:-2px; margin-left:10px; position:absolute;}
.level3 {margin-top:-4px; margin-left:20px; position:absolute;}
.level4 {margin-top:-3px; margin-left:30px; position:absolute;}
.level5 {margin-top:-2px; margin-left:40px; position:absolute;}
.level6 {margin-top:0px; margin-left:50px; position:absolute;}
</style>
</head>
<body>
<p><b class="level1">T</b><b class="level2">h</b><b class="level3">e</b> 
<b class="level4">e</b><b class="level5">n</b><b class="level6">d.</b></p>
 </body>
 </html>

jsFiddle バージョン

于 2012-10-09T02:23:38.213 に答える