倾斜的类按钮中的文本不倾斜答案

【问题标题】：Not skewed text in skewed class button倾斜的类按钮中的文本不倾斜
【发布时间】：2014-07-16 11:08:40
【问题描述】：

我为我的网站创建了一个带有 CSS 类的按钮，我希望它具有平行四边形形状，因此我使用了 skew 函数来创建形状。代码是正确的，并且按钮具有我想要的形状，但是按钮内的文本在其换行之后也产生了倾斜。有一种方法可以使文本看起来不像按钮内的斜塔？这是html代码：

<input type="submit" alt="submit" value="Login" class="button">

这就是按钮类的 CSS：

.button {
    float: top;
    width: 275px;
    height: 40px;
    margin-top: 6px;
    display: inline-block;
    font-family: Impact;
    text-align: center;
    -webkit-transform: skewX(20deg);
    -moz-transform: skewX(20deg);
    -o-transform: skewX(20deg);
    transform: skewX(20deg);
}

【问题讨论】：

标签： html css

【解决方案1】：

部分支持 Sidharth，我认为您不会绕过包装元素来应用 CSS 转换，然后为其子元素（提交输入）重置它：

<div class="button-wrapper">
  <input type="submit" alt="submit" value="Login">
</div>

Sidharth 的回答意味着您完全隐藏了原始的 <input> 并在单击样式包装器时依赖 JavaScript 来触发对它的单击，但这里有一个简单的解决方法：在 :hover 上设置 button-wrapper 和从嵌套的<input>-元素中删除所有样式并使其宽度为 100% (jsBin example)：

.button-wrapper {
  background: #fff;
  border: 1px solid #bbb;
  border-color: #ddd #ccc #bbb;
  overflow: hidden;

  -webkit-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  -o-transform: skewX(20deg);
  transform: skewX(20deg);
}

.button-wrapper:hover {
  background: #efe;
  border-color: #090;
}

.button-wrapper input {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 20px;
  font-weight: bold;
  padding: 4px 0;
  margin: 0;
  width: 100%;

  -webkit-transform: skewX(-20deg);
  -moz-transform: skewX(-20deg);
  -o-transform: skewX(-20deg);
  transform: skewX(-20deg);
}

.button-wrapper input:hover {
  color: #060;
}

【讨论】：

【解决方案2】：

我知道几年过去了，但我刚刚遇到了同样的问题，发现只需对文本进行反向倾斜就可以解决我的问题，如下所示：

.yellowShape {
     background-color: rgba(244,255,88,0.92);
     padding: 3px;
     -webkit-transform: skew(20deg);
     transform: skew(20deg); 
}

.yellowShape p {
    -webkit-transform: skew(-20deg);
    transform: skew(-20deg); 
}

【讨论】：

【解决方案3】：

为“按钮”创建一个包装器并将文本放入其中。但是，如果单击文本，则需要使用 javascript 触发按钮上的“单击”，否则它不会“传播”到按钮。

【讨论】：