Document Thumbnail With Css Custom Property
See the Pen Document Thumbnail With Css Custom Property by scootman (@scootman) on CodePen.
Document Thumbnail With Css Custom Property
Description: 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.
Browsers: Chrome Edge Firefox Opera Safari
Made with: HTML (Slim) CSS (SCSS)
Posted: 9.11.2017