Angled Corner Div

For UDIM

by Chris LaFrombois

HTML

<div>
  <img src="http://placehold.it/600x400/e6e7e8/000000" />
</div>

CSS

div {
  background: #ccc;
  position: relative;
  /* fallback */
  background: linear-gradient(135deg, transparent 10px, #ccc 0) top left, linear-gradient(0deg, transparent 0, #ccc 0) top right, linear-gradient(315deg, transparent 10px, #ccc 0) bottom right, linear-gradient(0deg, transparent 0, #ccc 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

img {
  width:100%;
}

div::after {
  position:absolute;
  content:'';
  display:block;
  z-index:-1;
  background: #cc0000;
  /* fallback */
  background: linear-gradient(135deg, transparent 11px, #cc0000 0) top left, linear-gradient(0deg, transparent 0, #cc0000 0) top right, linear-gradient(315deg, transparent 11px, #cc0000 0) bottom right, linear-gradient(0deg, transparent 0, #cc0000 0) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  top:-10px;
  right:-10px;
  bottom:-10px;
  left:-10px;
}


/* Ignore the CSS from this point, it's just to make the demo more presentable */

body {
  font-family: sans-serif;
}

div {
  width:50%;
  margin: 15px auto;
  padding: 13px 15px;
  color: white;
  line-height: 1.5;
}