傾斜文本僅

Question

我有一個要求，我得歪斜動態文本僅在底部，像這樣：

我不是在尋找實際的代碼這麼多，因爲我是一種普遍的方法，甚至是可行性的衡量標準。

我已經試過

到目前爲止，我已經試過了是那是顏色與背景相同的字符的底部浮動圓形圖像的唯一的事。這個「作品」對於一些信件沒有彎曲底部，像「N」，但像「O」字母，這種方法失敗：

是這樣可以使用CSS變換的組合，或任何其他編程方法？

Answer 1

我認爲你需要HTML5畫布爭取更好的成績。但我仍然有一個竅門做只是簡單的方法：

UPDATE：

至於你說你只想底部得到切成斜面。我想這就是你想要的。

body { 
 
    margin: 0px; 
 
} 
 
.container { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 250px; 
 
    height: 250px; 
 
    font-family: impact, Calibri; 
 
    background: #E80000; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    margin-right: 10px; 
 
} 
 
.skew { 
 
    display: block; 
 
    height: 170px; 
 
    width: 249px; 
 
    text-align: center; 
 
    font-size: 200px; 
 
    line-height: 200px; 
 
    color: white; 
 
    overflow: hidden; 
 
} 
 
.overlay { 
 
    position: relative; 
 
    display: block; 
 
    height: 20px; 
 
    text-align: center; 
 
    background: #E80000; 
 
    transform: skewY(-3deg); 
 
    /* Standard syntax */ 
 
    margin-top: -5px; 
 
}

<div class="container"> 
 
    <div class="skew"> 
 
    NO 
 
    </div> 
 
    <span class="overlay"></span> 
 
</div>

爲了更好地理解伎倆看看：http://jsfiddle.net/mt3d6vxh/3/

Answer 2

我認爲這樣做的唯一方法是將大量的jQuery/JavaScript繪製到畫布上。

這可能會幫助： http://jsfiddle.net/joshnh/pXbVh/

html { 
    background: #ffe; 
    text-align: center; 
} 
.skewed { 
    display: inline-block; 
    font: 2em/1 impact, sans-serif; 
    margin-top: 5em; 
    position: relative; 
    -webkit-transform: rotate(-10deg) skew(-10deg, 0); 
     -moz-transform: rotate(-10deg) skew(-10deg, 0); 
     -ms-transform: rotate(-10deg) skew(-10deg, 0); 
     -o-transform: rotate(-10deg) skew(-10deg, 0); 
      transform: rotate(-10deg) skew(-10deg, 0); 
} 
.skewed:after, 
.skewed:before { 
    background: #666; 
    box-shadow: inset 0 0 0 .5em #666, 
       inset 0 .7em 0 #666, 
       inset 0 .9em 0 #888, 
       inset 0 1.4em 0 #666, 
       inset 0 1.6em 0 #888, 
       inset 0 2.1em 0 #666, 
       inset 0 2.3em 0 #888, 
       inset 0 2.5em 0 #666; 
    content: ''; 
    height: 3em; 
    position: absolute; 
    top: 0em; 
    width: 3.5em; 
    z-index: -1; 
} 
.skewed:after { 
    border-radius: .25em 0 0 .25em; 
    left: -2.5em; 
} 
.skewed:before { 
    border-radius: 0 .25em .25em 0; 
    right: -2.5em; 
} 
.skewed span { 
    background: #666; 
    box-shadow: 0 0 0 .2em #ffe; 
    color: #ffe; 
    padding: 1em; 
    position: relative; 
    text-shadow: 1px 2px 0 #666, 
       2px 3px 0 #888; 
    text-transform: uppercase; 
} 

此外，如果你想嘗試畫布路線： http://www.html5rocks.com/en/tutorials/canvas/texteffects/