2

CSSクラスを使用してWebサイトのボタンを作成しましたが、平行四辺形の形状にしたいので、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);
}
4

3 に答える 3

4

Sidharthを部分的に支持しているので、ラッパー要素を回避してCSS変換を適用してから、その子要素（submit-input）用にリセットすることはないと思います。

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

Sidharthの答えは、オリジナルを完全に非表示に<input>し、スタイル設定されたラッパーがクリックされたときにJavaScriptを使用してクリックをトリガーすることを意味しますが、これを回避する簡単な方法は次のbutton-wrapperとおりです:hover。<input>％幅（jsBinの例）：

.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;
}
于 2012-10-07T01:46:30.873 に答える
1

私は何年も前のことを知っていますが、私はちょうどこの同じ問題に遭遇し、私のコードで次のように、テキストに対して逆スキューを実行するだけで私の問題が解決したことを発見しました：

.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); 
}
于 2014-07-16T03:08:40.833 に答える
0

「ボタン」のラッパーを作成し、その中にテキストを配置します。ただし、テキストがクリックされた場合は、ボタンに「伝播」しないため、JavaScriptを使用してボタンの「クリック」をトリガーする必要があります。

于 2012-10-07T01:04:05.493 に答える