<div>Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</div>
body {
padding: 1%;
}
/**
* Beveled corners — with clip-path
*/
div {
background: #58a;
clip-path:
polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px);
padding: 1em 1.2em;
max-width: 12em;
color: white;
font: 150%/1.6 Baskerville, Palatino, serif;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.