Skew text on bottom only - html

Question

I have a requirement where I have to skew dynamic text only on the bottom, like so:
I'm not looking for actual code so much as I am a general approach, or even a gauge of feasibility.
What I've tried
So far, the only thing I've tried is floating a rounded image over the bottom of the character that's the same color as the background. This "works" for some letters without curved bottoms, like "N", but for letters like "O", this approach fails:
Is something like this possible using a combination of CSS transforms, or any other programmatic approach?

Answer 1

I think you need HTML5 Canvas for better results. But still i have a trick to do with just simple way:
UPDATE :
As you said you want just the bottom to get cut in a slant. I guess this is what you looking for.
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>
For better understanding the trick have a look : http://jsfiddle.net/mt3d6vxh/3/

Answer 2

I think the only way of doing this would be a lot of jQuery/JavaScript to draw to a canvas.
This may help:
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;
}
Also if you want to try out the canvas route:
http://www.html5rocks.com/en/tutorials/canvas/texteffects/