倾斜文本仅

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/