-1
<img class="triangle" src="image.png"/>

CSS

.triangle{
??}

Now I want to apply css to the triangle class to show the image in a triangle.

Ionut Necula
  • 11,107
  • 4
  • 45
  • 69
The Dreamer
  • 13
  • 6

1 Answers1

3

I've made you a fiddle here. You need to wrapp your image with a div to do what you want:

Fiddle.

.triangle{
    position: relative;
}
.triangle:before{
    border-top: 0;
    border-right: 190px solid white;
    border-bottom: 240px solid transparent;
    border-left: 170px solid white;
    position: absolute;
    content: "";
}
<div class='triangle'>
    <img src="http://s.hswstatic.com/gif/landscape-photography-1.jpg"/>
</div>
Ionut Necula
  • 11,107
  • 4
  • 45
  • 69
  • Can you elaborate on how and why this works? It's a very good solution, I'd love to understand why this works though? – patrick Mar 17 '17 at 08:11
  • 1
    @patrick, there is not that much explaining to it. Using borders you can create different shapes, like triangles in the above example. `:before` pseudo element makes it easy to place the borders above the `.triangle` element by also making use of `relative` and `absolute` positioning. You can see more examples of shapes here https://css-tricks.com/examples/ShapesOfCSS/ – Ionut Necula Mar 17 '17 at 09:53