底部带有三角形的div，带有背景图像答案

【问题标题】：div with triangle at the bottom with background image底部带有三角形的div，带有背景图像
【发布时间】：2016-01-25 09:23:20
【问题描述】：

我想制作一个div，底部有一个三角形。但是我需要三角形上的背景图片出现，我尝试使用伪元素（:after）但它不起作用。

#homebg:after{
    content:'';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: solid 50px #fff;
    border-left: solid 48vw transparent;
    border-right: solid 48vw transparent;
}

我需要让div 出现在这张图片中，而background 在三角形中：

【问题讨论】：

虽然这里的问题标题有点不同（这会使它不会出现在搜索结果中），但您需要的方法类似于此答案中使用的方法 - stackoverflow.com/questions/33091401/…（尤其是剪辑-路径）。

标签： html css svg css-shapes

【解决方案1】：

您可以使用剪贴蒙版

div {
    -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);
    clip-path: polygon(0% 0%, 100% 0, 100% 75%, 50% 100%, 0 75%);
}

查看this 网站以生成您自己的面具。

【讨论】：

感谢您的建议，不幸的是它不适用于 Firefox，只能在 chrome 上运行。还有其他方法可以做到这一点并跨浏览器支持。
@adeade：你必须为 Firefox 使用内联 SVG，因为它还不支持 CSS 剪辑路径。看看我在 cmets 中链接到问题样本的答案。

【解决方案2】：

纯色上的三角形

如果三角形显示在纯色上，您可以将此方法与绝对定位的伪元素一起使用：

div{
    position:relative;
    background:url('http://i.imgur.com/W27LCzB.jpg');
    background-size:cover;
    min-height:100px;
    padding-bottom:100px;
    overflow:hidden;
}
div:after{
    content:'';
    position:absolute;
    bottom:0; left:0;
    border-left:50vw solid #fff;
    border-right:50vw solid #fff;
    border-top:100px solid transparent;
}

&lt;div&gt;&lt;/div&gt;

三角形的左右部分被伪元素的左右边框隐藏。这就是为什么这种方法不适用于渐变或图像的原因。

图像或渐变上的三角形

在这些情况下，您可以使用带有 clipPath 和 polygon 元素的内联 svg：

body, html{
  height:100%;
  background:url('https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg')no-repeat center center;
  background-size:cover;
}
svg{
  display:block;
  width:100%;
  }

<svg viewbox="0 0 100 40">
  <clipPath id="clip">
    <polygon points="0 0 100 0 100 25 50 40 0 25" />
  </clipPath>
  <image xlink:href="https://farm4.staticflickr.com/3165/5733278274_2626612c70.jpg"  width="100" height="65" clip-path="url(#clip)"/>
</svg>

对于相同的结果，还有其他可能的方法。你可以在这里找到一些：CSS Transparent arrow/triangle

【讨论】：

【解决方案3】：

我们只能使用 linear-gradient 和 mask 来做到这一点。你可以调整你想要的高度。

div {
  --triangle-height: 100px; /* you can change this */
  --mask: linear-gradient(#000, #000) 0 0/100% calc(100% - var(--triangle-height)) no-repeat, 
          linear-gradient(to top right, transparent 49.5%, #000 50% 100%) 0 100%/50% var(--triangle-height) no-repeat, 
          linear-gradient(to top left, transparent 49.5%, #000 50% 100%) 100% 100%/50% var(--triangle-height) no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  width: 500px;
  height: 400px;
  background: url(https://i.picsum.photos/id/1043/5184/3456.jpg?hmac=wsz2e0aFKEI0ij7mauIr2nFz2pzC8xNlgDHWHYi9qbc) 50% 50%/cover;
  background-repeat: no-repeat;
}

&lt;div&gt;&lt;/div&gt;

通过改变变量和调整width: 100%

div {
  --triangle-height: 200px; /* you can change this */
  --mask: linear-gradient(#000, #000) 0 0/100% calc(100% - var(--triangle-height)) no-repeat, 
          linear-gradient(to top right, transparent 49.5%, #000 50% 100%) 0 100%/50% var(--triangle-height) no-repeat, 
          linear-gradient(to top left, transparent 49.5%, #000 50% 100%) 100% 100%/50% var(--triangle-height) no-repeat;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  width: 100%;
  height: 400px;
  background: url(https://i.picsum.photos/id/1043/5184/3456.jpg?hmac=wsz2e0aFKEI0ij7mauIr2nFz2pzC8xNlgDHWHYi9qbc) 50% 50%/cover;
  background-repeat: no-repeat;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：