带背景图像的三角形
Posted
技术标签:
【中文标题】带背景图像的三角形【英文标题】:Triangle shape with background image 【发布时间】:2012-06-13 18:11:47 【问题描述】:我正在做一个项目,该项目需要两个三角形来保存背景图像并成为链接。
这是我想要两个三角形的模型。
目前,我只有两个跨度为 900x600 的 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>
【问题讨论】:
尝试 csspointer-events
属性。
【参考方案1】:
正如你所说,css3 三角形是由边框组成的,所以你不能给它们附加背景。
我建议你只使用两个 PNG 并使用 js 来监听点击事件并根据鼠标位置创建正确的操作。
还有一个 webkit-mask css 属性,但它在其他浏览器中非常不受支持(我将它用于一个小的分页起球技巧 - http://jsfiddle.net/xTNTH/3/ - 最好在 safari [no js only css] - http://snag.gy/7fRNq.jpg)
【讨论】:
【参考方案2】:这是我的 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');
【讨论】:
【参考方案3】:如果您在链接中使用子图像而不是背景图像,这真的很容易。您只需倾斜两个具有不同变换原点的.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;
【讨论】:
要建立在 Ana 的答案之上,如果容器的宽度需要灵活,您可以使用 javascript 在窗口调整大小时计算角度,如下所述:***.com/a/14200600/848254【参考方案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" clip-path="url(#top)"/>
<image xlink:href="http://i.imgur.com/5NK0H1e.jpg" x="0" y="0" clip-path="url(#bottom)"/>
</svg>
【讨论】:
【参考方案5】:使用 CSS clip-path
的响应式想法
.pageOption
height: 100vh;
position: relative;
.pageOption .photo
position: absolute;
top: 0;
left: 0;
right: 5px;
bottom: 5px;
background: url('https://picsum.photos/id/1068/900/900') center/cover;
clip-path: polygon(0 0, 100% 0, 0 100%);
.pageOption .cinema
position: absolute;
top: 5px;
left: 5px;
right: 0;
bottom: 0;
background: url('https://picsum.photos/id/1055/900/900') center/cover;
clip-path: polygon(100% 100%, 100% 0, 0 100%);
.pageOption a:hover
filter:grayscale(1);
body
margin: 0;
<div class="pageOption">
<a href="#" class="option photo" ></a>
<a href="#" class="option cinema"></a>
</div>
【讨论】:
以上是关于带背景图像的三角形的主要内容,如果未能解决你的问题,请参考以下文章