1

私はデザインを受け取りましたが、これはフラッシュ Web サイトであると確信していますが、会社はそれが HTML で実行可能であると確信しています 。

4

6 に答える 6

2

確かに実行可能ですが、IE8 などの古いブラウザーをサポートする場合は、要素に傾斜効果を作成するために、要素の背景として使用する透明な PNG 画像を使用する必要があります。

古いブラウザーをサポートする必要がない場合は、CSS3 transformを参照してください。

于 2012-06-14T12:55:24.260 に答える
0

それらの背景用の画像を作成し、コンテンツを表示する div の背景画像を作成します。

于 2012-06-14T12:55:12.107 に答える
0

次のようなこともできます: http://jsfiddle.net/vYU7N/2/

対角線を作成するために、さまざまなサイズの境界線を使用しています。

#left{
  position:absolute;
  border-right:200px solid #0080bf;
  border-top:500px solid transparent;
  left:-200px;
  top:0;
}

#right{
  position:absolute;
  border-left:200px solid #0080bf;
  border-bottom:500px solid transparent;
  right:-200px;
  top:0;
}

#container{
  position:relative;
  width:400px;
  height:460px;
  margin-left:250px;
  background:#0080bf;
  padding:20px;
  color: white;
}

少し調整が必要です。Chrome/IE8 でテストおよび動作

于 2012-06-14T13:14:48.180 に答える
0

私はhttp://raphaeljs.com/を非常に多目的に使用し、サイトに過度の「重み」を加えるべきではありません

于 2012-06-14T13:31:37.410 に答える
0

次のようなことができますか？

   #parallelogram {
      width: 130px; 
      height: 75px;
      background: pink;
      /* Skew */
      -webkit-transform: skew(20deg); 
      -moz-transform: skew(20deg); 
      -o-transform: skew(20deg);
      transform: skew(20deg);
   }

==編集==

わかりましたので、テキスト部分の傾きを直します:

<div style="width: 130px; 
      height: 75px;
      background: pink;
      /* Skew */
      -webkit-transform: skew(20deg); 
      -moz-transform: skew(20deg); 
      -o-transform: skew(20deg);
      transform: skew(20deg);">
    <div style=" margin:2em;
      -webkit-transform: skew(-20deg); 
      -moz-transform: skew(-20deg); 
      -o-transform: skew(-20deg);
      transform: skew(-20deg);
    ">inner text</div>
</div>
于 2012-06-14T13:01:35.523 に答える