Image inside triangle css?

Question

I'd like to achieve a custom image triangle shape with rounded corner like this using css

enter image description here

I looking for how achieve like this but nothing, i want to achieve my css can do result like this,any ideas? Sorry if my question has looks like other question

Thanks

Do you mind if the end result utilses a png? Or do you literally want a pure css solution here? — Sean, Jun 24 '13 at 16:10
You should probably use a png as Sean suggests. However if you really want to do it with css only [this question](http://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css) might help you out. — bukka, Jun 24 '13 at 16:33
@SeanDunwoody : yes,i want make it pure css only and the image as a background.similar question http://stackoverflow.com/questions/14446677/how-to-make-3-corner-rounded-triangle-in-css..but i want the backgroun is png..please help..I've been search long time to achieve like that,, — ltvie, Jun 24 '13 at 22:48

score 0 · Answer 1 · answered May 16 '18 at 16:41

You could use clip-path. It allows you to show only part of an element and hide the rest, so make a polygon with sufficient dots for the rounded effect at corners.

.tri {

    position: relative;
    width: 130px;
    height: 130px;
    background: url("http://pdphoto.org/images/tacos.jpg");

    clip-path: polygon(1% 78%, 46% 2%, 49% 0, 54% 0, 57% 2%, 98% 78%, 98% 83%, 95% 87%, 89% 88%, 6% 89%, 2% 87%, 0 83%);
  }

<div class="tri"></div>

Image inside triangle css?

1 Answers1