Css chamfered corner

div {
  background: #c00;
  /* fallback */
  background: -moz-linear-gradient(45deg, transparent 10px, #c00 10px), -moz-linear-gradient(135deg, transparent 10px, #c00 10px), -moz-linear-gradient(225deg, transparent 10px, #c00 10px), -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
  background: -o-linear-gradient(45deg, transparent 10px, #c00 10px), -o-linear-gradient(135deg, transparent 10px, #c00 10px), -o-linear-gradient(225deg, transparent 10px, #c00 10px), -o-linear-gradient(315deg, transparent 10px, #c00 10px);
  background: -webkit-linear-gradient(45deg, transparent 10px, #c00 10px), -webkit-linear-gradient(135deg, transparent 10px, #c00 10px), -webkit-linear-gradient(225deg, transparent 10px, #c00 10px), -webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}

div {
  background-position: bottom left, bottom right, top right, top left;
  -moz-background-size: 50% 50%;
  -webkit-background-size: 50% 50%;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}


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

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

Source: stackoverflow.com

Similar codes

0 vote276 views1 answer
Check browser on css
CSS
0 vote277 views1 answer
Using a Python dict for a SQL INSERT statement
CSS
0 vote268 views1 answer
Nuxt page transition
CSS
0 vote246 views1 answer
Css hot to center image in bootsrtap container
CSS
0 vote288 views1 answer
All heading tags selector scss
CSS
0 vote282 views1 answer
Shadow on hover class on card bootstrap
CSS
0 vote258 views1 answer
Css percentrage minus px
CSS
0 vote264 views1 answer
How to make gray ufing rgb in css
CSS
0 vote302 views2 answers
Https://www.youtube.com/s/desktop/f357c206/cssbin/www-main-desktop-watch-page-skeleton.css
CSS
0 vote313 views1 answer
Bootstrap modal resize with jquery
CSS