Crop Images Like This?

[realph]

Does anyone know if it’s possible to crop images like this in CSS without using an application like photoshop every single time?

Almost like a mask, where I can drop my images in and it sections off part of the image like a tooltip.

[Paulie_D]

Is this going to be a background image or just sitting inside a div?

It depends on what you are trying to achieve and why?

Frankly the answer is, I think, not with pure CSS although I think Webkit supports (supported?) image masks

https://css-tricks.com/webkit-image-wipes/

[realph]

I need it to be an image, possibly inside a div. Not keen on image masks, wondered if there was another way around this.

[instantMash]

Will the background (the black area, in your image) always be a solid color?

[realph]

@instantMash Not really. Using multiple background images behind that image.

[Paulie_D]

Then I think you’re SOL

[realph]

So in regards to webkit masks, is there a way to create webkit masks purely of CSS, no images? As that shape’s pretty basic.

[Paulie_D]

Nope…not AFAIK

[Kitty Giraudel]

No. The best way would probably be a PNG.

[Author]

Posts