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

Question

I want to make a div , with a triangle at the bottom . But I need the background image on the triangle to appear, I've tried using a pseudo element ( :after ) but it doesn't work.

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

I need to make the div appear like in this image with the background in the triangle :

Answer 1

Triangle over a plain color

If the triangle is displayed over a plain color, you can use this approach with an absolutely positioned pseudo element :

 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>

The left and right parts of the triangle are hidden by the left and right borders of the pseudo element. That is why this approach won't work over a gradient or image.

---

Triangle over an image or gradient

In these cases, you can use an inline svg with clipPath and a polygon element :

 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>

There are other possible approaches for the same result. You can find some here : CSS Transparent arrow/triangle

Answer 2

You can use a clipping mask

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

Have a look at this website to generate your own masks.

Answer 3

We can do this with only linear-gradient and mask . You can adjust the height you want.

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

 <div></div>

By changing the variable and adjusting 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; }

 <div></div>