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。