How to apply triangle shape to an image?

Question

have tried the below code but my image didnt change to the triangle shape. Help me with some solutions for my problem

.triangle {
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid transparent;
}

Looks like you're trying to do this: css-tricks.com/snippets/css/css-triangle If you're trying to clip an img into a triangle, this won't work — ilia
– ilia, Commented Mar 23, 2015 at 10:31
more details please of what image you need to in that triangle :p — Herman Nz
– Herman Nz, Commented Mar 23, 2015 at 10:45

jbutler483 · Accepted Answer · 2015-03-23 11:07:08Z

3

If you play about with the borders, and you have a solid color for a background, you could use something like:

div {
  height: 300px;
  width: 300px;
  position: relative;
  background: url(http://placekitten.com/g/300/300);
}
div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  border-bottom: 300px solid transparent;
  border-left: 150px solid white;
  border-right: 150px solid white;
}

<div></div>

Which is using a pseudo element to 'clip' the triangle shape

answered Mar 23, 2015 at 11:07

jbutler483

24.7k11 gold badges100 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ilia · Accepted Answer · 2015-03-23 10:33:40Z

1

If you're trying to clip an image into the shape of a rectangle, use clip-path.

Here's a nice helper: http://bennettfeely.com/clippy/

answered Mar 23, 2015 at 10:33

ilia

3293 silver badges11 bronze badges

Comments

Ram Khumana · Accepted Answer · 2015-03-23 10:36:44Z

1

CSS:

.triangle {      
  width: 0; height: 0;
  border-bottom: 116px solid blue;
  border-left: 116px solid transparent;
  border-right: 116px solid transparent;
}

Fiddle url: http://jsfiddle.net/Khumesh/kpm1feLo/

Try this one: http://jsfiddle.net/Khumesh/zbh3ewLd/

edited Mar 23, 2015 at 10:36

answered Mar 23, 2015 at 10:32

Ram Khumana

8426 silver badges14 bronze badges

1 Comment

Avanthi Over a year ago

I dont want the blue color instead want change to my image to a triangle shape.

Collectives™ on Stack Overflow

How to apply triangle shape to an image?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related