带背景图像的三角形

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>

【问题讨论】:

尝试 css pointer-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>

【讨论】:

以上是关于带背景图像的三角形的主要内容,如果未能解决你的问题,请参考以下文章

创建具有重复背景图像的响应式三角形

将图像背景放在 CSS 三角形上

带有背景图像的CSS三角形[重复]

带背景颜色的小三角实现

在图像上缩进的透明箭头/三角形

如何在openGL中旋转图像?