10

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 : div with *background image* and a full width triangle at the bottom

Ionut Necula
  • 11,107
  • 4
  • 45
  • 69
adeade
  • 317
  • 5
  • 12
  • 1
    Though the question title here is a bit different (which would have made it not appear in search results), the approach you need is similar to the ones used in this answer - http://stackoverflow.com/questions/33091401/background-image-linear-gradient-jagged-edged-result-needs-to-be-smooth-edged/33094994#33094994 (especially clip-paths). – Harry Oct 26 '15 at 10:19

3 Answers3

14

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://placehold.co/600x400"  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

web-tiki
  • 99,765
  • 32
  • 217
  • 249
7

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.

Fester
  • 863
  • 1
  • 12
  • 33
  • Thanks for advice, unfortunately it's not working on firefox, only on chrome. are there another way to do that and cross browser support. – adeade Oct 26 '15 at 10:18
  • 1
    @adeade: You'd have to use inline SVG for Firefox as it doesn't support CSS clip-path as yet. Have a look at the answer I linked in comments to question for a sample. – Harry Oct 26 '15 at 10:20
0

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>

enter image description here

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>
doğukan
  • 23,073
  • 13
  • 57
  • 69