html - 倾斜限制下的 div 元素管理

Question

那好吧。我有一个倾斜的按钮，里面有一个 div，它被去倾斜以使里面的图像和文本看起来不像斜塔。现在我需要在该按钮内部，在按钮的前 25% 处有一张图片，在中间 50% 处有一个文本，在最后 25% 处有另一个图像。我尝试过使用不同的 div，但我遇到了一个问题，这取决于我定义了这样的东西:

.button-wrapper div {
            background: transparent;
            border: 0;
            cursor: pointer;
            padding: 4px 0;
            margin: 0;
            width: 100%;
            font-family:Impact;
        font-size:26px;
        font-weight:normal;
        text-align: center;
            color:#ffffff;
            text-shadow:1px 1px 0px #000000;
            -webkit-transform: skewX(-35deg);
            -moz-transform: skewX(-35deg);
            -o-transform: skewX(-35deg);
            transform: skewX(-35deg);
}

其中 button-wrapper 是我倾斜的按钮。问题是，如果我使用其他 div，则会继续倾斜，并且按钮内的元素会卡在另一侧。关于如何获得我想要的东西的任何想法。这是我为 html 尝试过的内容:

  <div class="button-wrapper" href="sport.php">
      <div id="inner_text">
          <img src="images/icon.gif" width="40px" height="40px">
          <span width="200px">  sometext </span>
          <img src="images/light.gif" width="40px" height="40px">
      </div>
  </div>

更新:这是图片

Answer 1

很可能您不必在内部元素上指定任何 skewX 值，以避免它们从容器继承 CSS。