How can we achieve this image css style?

Question

In wordpress we have option to assign "Image CSS class" to any image. My requirement is how can we write a CSS class that will change the image shown below

Original Image

Image after CSS Class (Notice the lower corner)

As I post puzzles on my website so this is important.

Answer 1

CSS Approach:

For a purely triangular corner in css, see this blog post Code a Simple Folded Corner Effect With CSS or this Folded Corner example on Codepen You can then add the rotated "Answer" text as an absolutely positioned div with the css transform: rotate property.

However, if you absolutely have to the curled corner effect, your best bet is to overlay the original image with an absolutely positioned div with css background image of the curled corner on a transparent canvas.

---

Attributing the class to the image (or it's containing element/post)

Wordpress's media manager automatically assigns classes to the images uploaded and inserted into a post. There are multiple approaches to assigning a "class" to target the image(s).

1. If your corner effect applies to all the images on a particular post type,

   • you can simply target the images with css such as: .post-type-class img
   • alternatively, you can add a hook to the theme.

2. Create a custom image size (which will automatically be assigned a class with similar name). This approach will add the image size as an option in the media management screen when a user elects to insert an image into the post. See this well written/documented blog post: Adding and Using WordPress Custom Image Sizes