CSS 带背景图像的三角形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10969941/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Triangle shape with background image
提问by Ryan
I am working on a project that calls for two triangles to hold background images, and be links.
我正在做一个项目，需要两个三角形来保存背景图像，并作为链接。
Here is my mock up for how I would like the two triangles.
这是我对这两个三角形的喜好模型。
Currently, I have just two divs that span the 900x600 with each triangle as a background image. The issue I am having now is I can't hover over the transparent part of the Cinema div to reach the photo div.
目前，我只有两个跨越 900x600 的 div，每个三角形作为背景图像。我现在遇到的问题是我无法将鼠标悬停在 Cinema div 的透明部分上以到达照片 div。
Can I accomplish this design with css3 triangles and set their background images? I always thought the custom shape is made up from a border, with a border-color.
我可以用 css3 三角形完成这个设计并设置它们的背景图像吗？我一直认为自定义形状是由边框组成的，带有边框颜色。
Is it possible to do with css3 triangles, and if so, can someone help me with the code?
是否可以使用 css3 三角形，如果可以，有人可以帮我编写代码吗？
Here is what I currently have.
这是我目前拥有的。
.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>回答by Ana
It's really easy if you use child images for the links instead of background images. You just need to skew the two .optionelements with different transform origins, then unskew their child images and set overflow: hiddenon both .pageOptionand the .optionelements. Support is good, should work for everything except IE8/7 and Opera Mini.
如果您使用子图像而不是背景图像作为链接，这真的很容易。你只需要倾斜两种.option不同变换的起源元素，那么unskew他们的孩子的图像和设置overflow: hidden上都.pageOption和.option元素。支持很好，应该适用于除 IE8/7 和 Opera Mini 之外的所有内容。
DEMO
演示
Result:
结果：
HTML:
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>
Relevant CSS:
相关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;
}
回答by web-tiki
You can achive this layout with several approaches. Here is an example using an inline svgand the clip-path element:
您可以通过多种方法实现此布局。这是一个使用内联 svg和剪辑路径元素的示例：
<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>回答by Tooraj Jam
Here are my CSS suggestions:
以下是我的 CSS 建议：
- Using canvaswhich is HTML5 tag and is not cross browser.
- Using SVG. (Most reliable one)
- Using CSS3 rotate transition and cover it in a wrapper with hidden overflow. Again is not cross browser.
Rotate transition:
旋转过渡：
-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');
回答by Oren Roth
As you said, css3 tringles are made of borders so you can't attach backgrounds to them.
正如您所说，css3 三角形由边框组成，因此您无法为它们附加背景。
I would suggest you to just to use two PNGs one upon the other and to use js in order listen to the click event and create the correct action based on the mouse position.
我建议您只使用两个 PNG 一个接一个，并使用 js 来监听点击事件并根据鼠标位置创建正确的动作。
There is also a webkit-mask css property but it very unsupported in other browsers (I used it for a little pageing pilling trick - http://jsfiddle.net/xTNTH/3/- best on safari [no js only css] - http://snag.gy/7fRNq.jpg)
还有一个 webkit-mask css 属性，但它在其他浏览器中非常不受支持（我将它用于一个小的分页起球技巧 - http://jsfiddle.net/xTNTH/3/- 最好的 safari [没有 js 只有 css] - http://snag.gy/7fRNq.jpg)
