html - 仅在底部倾斜文本

Question

我有一个要求，我必须仅在底部倾斜动态文本，如下所示:

我不是在寻找实际代码，而是在寻找通用方法，甚至是衡量可行性的方法。

我尝试过的

到目前为止，我唯一尝试过的是在 Angular 色底部 float 一个与背景颜色相同的圆形图像。这对一些没有 flex 底部的字母“有效”，比如“N”，但对于像“O”这样的字母，这种方法失败了:

使用 CSS 转换或任何其他编程方法的组合是否可能实现这样的事情？

Answer 1

我认为您需要 HTML5 Canvas 以获得更好的结果。但我仍然有一个简单的方法:

更新:

正如您所说，您只想将底部斜切。我想这就是您要找的。

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/