Search code examples
csscss-shapes

Background in div

I made an upside down triangle for the header of my website by shaping a div. Here's the CSS. 

.triangle{
width: 0;
height: 0;
border-style: solid;
border-width: 100px 49vw 0 49vw;
margin-top:-8px;
border-color: gray transparent transparent transparent;
width:0;
height:0;

}

Instead of gray as the background color, I would like to insert a picture that conforms to the triangle. Does anyone have any ideas?

Thanks Alec

Solution

  • demo - http://jsfiddle.net/euppwbub/

    you can use pseudo element :after and hide outer extra content with border

    but you need to give height and background-image for .triangle

    .triangle {
  background: url(http://dummy-images.com/abstract/dummy-480x270-Rope.jpg);
  width: 100%;
  height: 100px;
  position: relative;
}
.triangle:after {
  content: '';
  border-style: solid;
  border-width: 100px 50vw 0vh 50vw;
  border-color: transparent white;
  top: 0;
  right: 0;
  left: 0;
  position: absolute;
}
    <div class="triangle"></div>