CODEWITHSUNDEEP
cssborder
Marcin Calak
Marcin Calak

Reputation: 25

Putting and image inside of a triangle

I hope you're having a nice day. My problem is that I need to put an image inside of a triangle div(To get a triangle outline for the image). This triangle div is created though, as if it was only a border of the div and with the div itself having 0 height and width. 

#triangle{
    height: 0;
    width: 0;
    border-width: 400px 0px 0px 500px;
    border-style: solid;
    border-color: transparent transparent transparent red;
    float: left;
    border-style: inset;}

and whenever I try to put the image inside of the triangle it just appears beside.

https://jsfiddle.net/5uv7m9tv/

Any tips on how to fix that? Thanks.

Upvotes: 0

Views: 1125

Answers (1)

David Thomas
David Thomas

Reputation: 253308

Don't create a <div> to give the triangle shape, instead use CSS clip-path to shape the <img> element:

img.triangle {
  /* the polygon() function takes a comma-separated list
     of x y positions in relation to the origin 0 0 point
     (the top-left) of the element, using those points
     to form a line from one to the next (and from the last
     to the first): */
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
<img class="triangle" src="http://lorempixel.com/150/150/people/2" />

References:

Upvotes: 1

Related Questions