Question

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

我不是在寻找实际的代码，因为我是一般的方法，甚至是可行性的衡量标准。

我尝试了什么

到目前为止，我唯一尝试过的是在角色底部浮动圆角图像，颜色与背景颜色相同。这对于某些没有弯曲底部的字母“起作用”，如“N”，但对于像“O”这样的字母，这种方法失败了：

使用CSS转换或任何其他编程方法的组合是否可以这样？

Answer 1

我认为这样做的唯一方法就是将很多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/

Answer 2

我认为您需要HTML5 Canvas才能获得更好的效果。但我仍然有一个简单方法可以做的伎俩：

更新：

正如你所说，你只想让底部倾斜。我想这就是你要找的东西。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

为了更好地理解这个技巧，请查看：http://jsfiddle.net/mt3d6vxh/3/

仅在底部歪斜文本

2 个答案: