Skip to content

Instantly share code, notes, and snippets.



Created Jan 30, 2015
What would you like to do?
Simple folded corners
* Simple folded corners
div {
background: yellowgreen; /* fallback */
padding: 1em;
width: 12em;
margin: 1em;
font: 150%/1.6 Baskerville, Palatino, serif;
body {
/* Showcase that the effect supports any backdrop */
background: repeating-linear-gradient(-45deg, #ddd 0, #ddd 25%, white 0, white 50%) 0 / 6px 6px;
box-sizing: border-box;
padding: 1em;
height: 100vh;
<div>Look at my cool folded corner.
It only took two lines of CSS, degrades gracefully and works everywhere!</div>
// alert('Hello world!');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment