我正在研究一個項目，要求兩個三角形來保存背景圖像，併成爲鏈接。三角形與背景圖像

這是我的模擬如何我想這兩個三角形。

目前，我剛纔兩個div跨越900x600每個三角形作爲背景圖像。我現在遇到的問題是我無法將鼠標懸停在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>

來源

2012-06-10 Ryan

試CSS ['指針events']（https://developer.mozilla.org/en/CSS/pointer-events ）財產。 – undefined

，如果你使用兒童圖片的鏈接，而不是背景圖片這真的很容易。您只需要將兩個.option元素歪斜爲不同的轉換起點，然後將其子圖像解開並在.pageOption和.option元素上設置overflow: hidden。支持是好的，應該適用於除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; 
}

來源

2013-02-15 06:44:31 Ana

要在Ana的回答之上構建，如果容器的寬度需要靈活，那麼可以使用JavaScript在窗口大小上計算角度，如此答案中所述：http://stackoverflow.com/a/14200600/848254 –

正如你所說，CSS3 tringles由邊界的，所以你可以不重視的背景給他們。

我建議你只需要使用兩個PNG一個在另一個上，並使用js爲了監聽點擊事件並根據鼠標位置創建正確的動作。

還有一個WebKit的面具CSS屬性，但它在其他瀏覽器非常不支持（我用了一個小pageing起球絕招 - http://jsfiddle.net/xTNTH/3/ - 最好的探險之旅[沒有JS只CSS] - http://snag.gy/7fRNq.jpg）

來源

2012-06-11 12:18:17

這裏是我的CSS建議：

使用canvas這是HTML5標記，不是跨瀏覽器。
使用SVG。（最可靠的）
使用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');

來源

2012-06-11 12:36:37

您可以通過多種方法實現此佈局。下面是將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>

來源

2016-04-13 14:58:46

三角形與背景圖像

回答

DEMO

相關問題