css chamfered corner

1div {
2  background: #c00;
3  /* fallback */
4  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);
5  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);
6  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);
7}
8
9div {
10  background-position: bottom left, bottom right, top right, top left;
11  -moz-background-size: 50% 50%;
12  -webkit-background-size: 50% 50%;
13  background-size: 50% 50%;
14  background-repeat: no-repeat;
15}
16
17
18/* Ignore the CSS from this point, it's just to make the demo more presentable */
19
20div {
21  float: left;
22  width: 50px;
23  margin: 15px auto;
24  padding: 15px;
25  color: white;
26  line-height: 1.5;
27}