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
– Sean, Commented Jun 24, 2013 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 might help you out. — bukka
– bukka, Commented Jun 24, 2013 at 16:33
@SeanDunwoody : yes,i want make it pure css only and the image as a background.similar question stackoverflow.com/questions/14446677/… i want the backgroun is png..please help..I've been search long time to achieve like that,, — ltvie
– ltvie, Commented Jun 24, 2013 at 22:48

lalengua · Accepted Answer · 2018-05-16 16:41:46Z

1

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>

answered May 16, 2018 at 16:41

lalengua

5294 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

Image inside triangle css?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related