背景画像付きの三角形

Question

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

ここで私は2つの三角形をどのようにしたいのですか？現在

​​

、私は背景画像として各三角形で900x600にまたがるちょうど2つの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>

Answer 1

あなたの代わりに背景画像のリンクの子の画像を使用している場合、それは本当に簡単です。 2つの.option要素を異なる変換元でスキューし、子画像を非表示にして、.pageOptionと.option要素の両方にoverflow: hiddenを設定するだけです。サポートは良いです、IE8/7とOpera Mini以外のすべてで動作するはずです。

DEMO

結果：

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; 
} 

Answer 2

あなたがそれらに背景を付けることができないので、CSS3のtringlesが国境で作られて、言ったように。

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

（私は少しpageingピリングトリックのためにそれを使用http://snag.gy/7fRNq.jpgからhttp://jsfiddle.net/xTNTH/3/ - - 最高のサファリで[いいえJSのみCSS]）がありWebKitのマスクのCSSプロパティでもあるが、他のブラウザでは、それは非常にサポートされていない

Answer 3

がここに私の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'); 

Answer 4

このレイアウトは、いくつかの方法で作成できます。ここでinline svgとclip-path elementを使用した例である。

<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>