html - 底部带有三 Angular 形的div，带有背景图像

Question

我想制作一个div，底部有一个三 Angular 形。但是我需要三 Angular 形上的背景图像 出现，我尝试使用伪元素 (: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 三 Angular 形:

Answer 1

纯色上的三 Angular 形

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

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;
}

<div></div>

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

---

图像或渐变上的三 Angular 形

在这些情况下，您可以将内联 svg 与 clipPath 结合使用和一个 polygon元素:

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