/ Thumbnail

Document thumbnail with dog-ear via CSS custom property

Document thumbnail with dog-ear via CSS custom property

DOCUMENT THUMBNAIL WITH CSS CUSTOM PROPERTY

Dog-ear will position itself it top right corner regardless of original size / aspect ratio of image. Effect achieved by using hidden img to set size of relatively positioned parent container - then two absolutely positioned pseudo elements with the same image as a background overlap to leave dog-ear gap top right. Image url supplied by custom property declared inline in HTML.

Made with

HTML (Slim) / CSS (SCSS)

Author

Scott Henderson

Demo

See the Pen Document thumbnail with dog-ear via CSS custom property by Scott Henderson (@scootman) on CodePen.

CodeTea

A Nice collection of often useful examples done in HTML JavaScript CSS.

Read More