2

私はフィドルを作りました：

http://jsfiddle.net/89x4d/

歪んだdivを維持しようとしていますが、pテキストをまっすぐに保ちます。

これは可能ですか？

ありがとう

4

5 に答える 5

10

20degDIV 変換を補正するには、 on Pの代わりに使用する必要があります0deg(結果は変換の構成であるため)。

于 2012-04-22T19:46:24.843 に答える
5

スキューの影響をキャンセルするには、変換に正の値を指定する必要があります。

p {
   -webkit-transform: skew(20deg) !important;
   -moz-transform: skew(20deg) !important;
   -o-transform: skew(20deg) !important;
   transform: skew(20deg) !important;
}

デモ

于 2012-04-22T19:54:46.347 に答える
1 

div {
    width: 200px;
    height:50px;
        background: red;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
    transform: skew(-20deg);
    margin: 20px;
    
    padding:0 25px;
}
p {
   -webkit-transform: skew(20deg) !important;
-moz-transform: skew(20deg) !important;
-o-transform: skew(20deg) !important;
    transform: skew(20deg) !important; 
}
<div>
<p>hey i'm straight, ok?</p>
</div>

ねえ、私はまっすぐです、いいですか？

于 2015-08-21T06:47:01.070 に答える
0

他の人が指摘したように、の逆は、skewいくつ<p>かの望ましくない結果につながる可能性があります。

また、新しいskew角度ごとに、内部コンテンツを逆にするために対応する CSS セレクター/宣言が必要になるという点で、再利用性が高くありません。

別の方法として、セレクターを使用し:beforeて、テキストの後ろに歪んだ要素を追加します。

HTML

<div>
  <p>hey i'm straight, ok?</p>
</div>

CSS

div {
  width: 200px;
  height:50px;
  margin: 20px;
  position:relative;
}

div:before {
  content: "";
  display:block;
  background: red;
  position:absolute;
  width:100%;
  height:100%;
  z-index:-1;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg);
}

そしてデモ。

于 2015-08-21T08:01:19.500 に答える
0

斜めに戻すことができるかどうかはわかりませんが、フォントが大きく歪んでいるようです。

skew(20) は私が得ることができる最も近いものですが、代わりに 2 つの div を設定できます。1 つは傾斜ボックス用で、もう 1 つはその上を移動します。

http://jsfiddle.net/gP9ne/3/

あなたが見るためにそこにフィドルをセットアップします

マーティン

編集：実際には違いはありません:piフォントが赤地に黒だけで、私の画面が好きではないと思います:p

いつも考え過ぎ！

于 2012-04-22T19:56:26.353 に答える