我正在研究一个项目，要求两个三角形来保存背景图像，并成为链接。三角形与背景图像

这是我的模拟如何我想这两个三角形。

目前，我刚才两个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

相关问题