CODEWITHSUNDEEP
csscss-shapes
Avanthi
Avanthi

Reputation: 21

How to apply triangle shape to an image?

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;
}

Upvotes: 1

Views: 69

Answers (3)

jbutler483
jbutler483

Reputation: 24539

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

Upvotes: 3

Ram Khumana
Ram Khumana

Reputation: 842

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/

Upvotes: 1

ilia
ilia

Reputation: 329

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/

Upvotes: 1

Related Questions