web-dev-qa-db-ja.com

背景画像付きの三角形

背景画像を保持し、リンクになるために2つの三角形を必要とするプロジェクトに取り組んでいます。

これが、2つの三角形をどのようにしたいかについてのモックアップです。

Triangles with background images

現在、900x600にまたがる2つのdivがあり、それぞれの三角形が背景画像として使用されています。私が今抱えている問題は、Cinema divの透明な部分にカーソルを合わせて写真divに到達できないことです。

このデザインをcss3の三角形で実現し、背景画像を設定できますか？カスタムシェイプはボーダーとボーダーカラーで構成されているといつも思っていました。

Css3の三角形で行うことは可能ですか？そうであれば、誰かがコードを手伝ってくれますか？

これが私が現在持っているものです。

.pageOption {
  position: relative;
  width: 900px;
  height: 600px;
}
.pageOption .photo {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuPhoto.png') no-repeat 0 0;
}
.pageOption .cinema {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 900px;
  height: 600px;
  background: url('../images/menuCinema.png') no-repeat 0 0;
}
<div class="pageOption">
  <a href="#" class="option photo" id="weddingPhoto"></a>
  <a href="#" class="option cinema" id="weddingCinema"></a>
</div>
csssvgcss-shapes
21
Ryan

背景画像の代わりにリンクに子画像を使用すると、本当に簡単です。変換の起点が異なる2つの.option要素を傾斜させ、それらの子画像の傾斜を解除し、overflow: hiddenと.pageOption要素の両方に.optionを設定するだけです。サポートは良好で、IE8/7とOpera Mini。

[〜＃〜] demo [〜＃〜]

結果：

triangle images

[〜＃〜] html [〜＃〜]：

<div class='pageOption'>
  <a href='#' class='option' data-inf='photo'>
    <img src='../images/menuPhoto.png'>
  </a>
  <a href='#' class='option' data-inf='cinema'>
    <img src='../images/menuCinema.png'>
  </a>
</div>

関連[〜＃〜] css [〜＃〜]：

.pageOption {
  overflow: hidden;
  position: relative;
  width: 40em; height: 27em;
}
.option, .option img { width: 100%; height: 100%; }
.option {
  overflow: hidden;
  position: absolute;  
  /* arctan(27 / 40) = 34.01935deg 
   * need to skew by 90deg - 34.01935deg = 55.98065deg
  */
  transform: skewX(-55.98deg);
}
.option:first-child {
  left: -.25em;
  transform-Origin: 100% 0;
}
.option:last-child {
  right: -.25em;
  transform-Origin: 0 100%;
}
.option img {
  transform: skewX(55.98deg);
  transform-Origin: inherit;
}
40
Ana

このレイアウトは、いくつかの方法で実現できます。 inline svg および clip-path要素 を使用した例を次に示します。

<svg viewbox="0 0 10 6.7">
  <defs>
    <clipPath id="top">
      <polygon points="0 0, 9.9 0, 0 6.6" />
    </clipPath>
    <clipPath id="bottom">
      <polygon points="10 0.1, 10 6.7, 0.1 6.7" />
    </clipPath>
  </defs>
  <image xlink:href="http://i.imgur.com/RECDV24.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#top)"/>
  <image xlink:href="http://i.imgur.com/5NK0H1e.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#bottom)"/>
</svg>
5
web-tiki

ここに私のCSSの提案があります：

  1. canvas を使用します。これはHTML5タグであり、クロスブラウザーではありません。
  2. [〜＃〜] svg [〜＃〜] を使用します。 （最も信頼できるもの）
  3. CSS3の回転遷移を使用して、オーバーフローを非表示にしてラッパーでカバーします。再びクロスブラウザではありません。

回転遷移：

-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome 
   -moz-transform: rotate(7.5deg);  /* FF3.5+ 
    -ms-transform: rotate(7.5deg);  /* IE9 
     -o-transform: rotate(7.5deg);  /* Opera 10.5 
        transform: rotate(7.5deg);
           filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 
                   M11=0.9914448613738104, M12=-0.13052619222005157,M21=0.13052619222005157, M22=0.9914448613738104, sizingMethod='auto expand');
3
Tooraj Jam

あなたが言ったように、css3の板は枠でできているので、背景を付けることはできません。

2つのPNGを重ねて使用し、jsを使用してクリックイベントをリッスンし、マウスの位置に基づいて正しいアクションを作成することをお勧めします。

Webkit-mask cssプロパティもありますが、他のブラウザーでは非常にサポートされていません（私はこれをページングピリングの小さなトリックに使用しました- http://jsfiddle.net/xTNTH/3/ -最高のサファリ[jsのみcssなし]- http://snag.gy/7fRNq.jpg ）

0
Oren Roth