0

では、わかりました。ピサの斜塔のように見えないように内部の画像とテキストを作成するために、内部にスキューが解除された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>

更新：これが画像です 私が欲しいものの画像

4

1 に答える 1

0

コンテナからCSSを継承しないように、内部アイテムにskewX値を指定する必要がない可能性があります。

于 2012-11-12T17:22:06.207 に答える