17

私は視差効果を使用しているウェブサイトに取り組んでいます。このように、三角形の形をした画像がいくつかあります。ここに画像の説明を入力

& 上記の DIV と重なるため、画像が透明になります。私はcssで非常に多くのことを試みています。しかし、望ましい結果が得られませんでした。固定幅で目的の結果を達成します。これを確認してくださいhttp://jsfiddle.net/eJ7Sf/2/ しかし、流動的な幅では機能しません。私がまだ試しているがうまくいかなかったことを確認してください

http://jsfiddle.net/ceGGN/3/

http://jsfiddle.net/eJ7Sf/1/

注: css3 MASKプロパティについては知っていますが、Firefox の以前のブラウザーでは機能しません。firefox 3.6.13までの機能が欲しい

4

3 に答える 3

8

更新された回答 (純粋な CSS3)

極端な要件には、極端なソリューションが必要な場合があります。元の回答 (以下) に基づいて、機能する純粋な css ソリューションを作成しました (時間をかけたい場合は、より適切に機能させることができます)。現在の例はレンダリングが少し「途切れ途切れ」ですが、問題ないかもしれませんが、そうでない場合は、それを駆動しているすでにわいせつな数の@mediaクエリを拡張する必要があります ( LESSまたはを使用して実装する方がはるかに簡単でしょう)。 SASS ; 数式駆動の Excel スプレッドシートをまとめて、数値を迅速に生成できるようにしました)。次のコードを使用します。

HTML

<div class="box">
   <img src="yourImage.jpg" />
</div>

CSS

.box{
    height:300px;  
    min-width: 100px; /*could be different, but you ought to have some min*/
    overflow:hidden;
}

.box img {
    height: 100%;
    width: 100%;   
    -ms-transform-origin: 100% 100%; /* IE 9 */
    -webkit-transform-origin: 100% 100%; /* Safari and Chrome */
    -moz-transform-origin: 100% 100%; /* Firefox */
    -o-transform-origin: 100% 100%; /* Opera */
    transform-origin: 100% 100%;
}

/*Sample... you need alot of these--my fiddle example has 51*/
@media screen and (min-width:  100px) { 
  .box { 
    -ms-transform:skewY(45deg); 
    -moz-transform:skewY(45deg); 
    -webkit-transform:skewY(45deg); 
    -o-transform:skewY(45deg); 
    transform:skewY(45deg); 
  } 
  .box img { 
    -ms-transform:skewY(-90deg); 
    -moz-transform:skewY(-90deg); 
    -webkit-transform:skewY(-90deg); 
    -o-transform:skewY(-90deg); 
    transform:skewY(-90deg);
  }
}

度数の計算方法はこちら

height: 300px狭い側がほぼ 100px高く、台形の角度が等しいと仮定します。これは、上下のオフセットが であることを意味し(300px - 100px) / 2 = 100pxます。次に、次の式に従って.box角度が@mediaクエリの金額から設定されます。min-width

Angle = arctan(100/min-width) /*100 is the upper/lower offset as above*/

.box img角度についてはを取り、Angleを掛け-2ます。したがって、次の疑似コード.boxとしてメディアクエリと.box img変換が生成されます。

@media screen and (min-width: [your target min-width]) { 
  .box {transform: skewY(Angle)}
  .box img {transform: skewY(-2*Angle)}
}

それがどの程度スムーズに機能min-widthするかは、新しい角度設定を取得するために変更を加えるマイクロスケールに完全に依存します上記の CSS コードのコメントで述べたように、私の例では 51 回のメディア クエリ呼び出しを使用していますが、まだ途切れがあります。

代わりにいくつかの JavaScript ソリューションを使用する方がよいでしょうか...おそらく、それは完全にデザイナー次第なので、純粋な css で動作するようにすることができるという純粋な概念実証として、ここでこれを提供します。

元の回答

これで流動的な幅を実現しているようです。画像のどの程度またはどの部分が表示されているかをどの程度制御したいのかわかりません。そのため、ニーズに完全には適合しない可能性がありますが、変換を使用して柔軟な幅の画像を作成し、偽の遠近感を与えます.

于 2012-04-01T18:42:25.810 に答える
5

SVG クリップパスあり

インライン SVGとclipPath 要素を使用して、この形状を実現できます。

<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="clip">
      <polygon points="10 0, 10 6.7, 0 4.7, 0 2" />
    </clipPath>
  </defs>
  <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>

CSS クリップパスあり

CSS の clip-path プロパティを使用して、この形状を実現することもできます。ブラウザーのサポートはかなり低いですが ( canIuseを参照)、簡単な方法です。
例を次に示します。

img{
  -webkit-clip-path:polygon(0% 20%, 100% 0%,100% 100%,0% 80%);
  clip-path:polygon(0% 20%, 100% 0%,100% 100%,0% 80%);
}
<img src="http://i.imgur.com/5NK0H1e.jpg" alt=""/>

于 2016-04-13T15:05:06.840 に答える
3

pseudoelementsと2DTransforms（Firefox 3.5以降でサポートされている）で少し遊ぶと、この効果を達成できます：http: //jsfiddle.net/fcalderan/T5KPA/1/

ChromeとFirefoxを試してみました。OperaおよびIE9の場合、独自のプレフィックスを追加する必要があります。

マークアップは本当に重要です：

<figure class="triangle">
    <img src="http://cssglobe.com/lab/angled/img.jpg">
</figure>

そしてこの効果を得るためのcss：

img { display: block; }

.triangle { 
   position   : relative; 
   overflow   : hidden; 
   padding    : 0; margin: 0; 
   display    : inline-block; 
}

.triangle:after,
.triangle:before {
   content    : "";
   position   : absolute;
   z-index    : 2;
   left       : -50%;
   width      : 200%;
   height     : 40%;
   display    : block;
   background : #fff;   
}

.triangle:before {
    top: -24%;  
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    transform: rotate(-10deg);
}

.triangle:after {
    bottom: -24%;  
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(10deg);
    transform: rotate(10deg);
}

回転した疑似要素に白を使用して色を付けましたが、もちろん、実際の背景色に合うように色を変更することもできます

于 2012-04-02T14:10:47.403 に答える