Question

I am playing with CSS3, and I am creating a box with cutted corners.

Here is the code:

.boxcornerscutted {
background: #ffffff;
background:
    -moz-linear-gradient(45deg,  transparent 10px, #ffffff 10px),
    -moz-linear-gradient(135deg, transparent 10px, #ffffff 10px),
    -moz-linear-gradient(225deg, transparent 10px, #ffffff 10px),
    -moz-linear-gradient(315deg, transparent 10px, #ffffff 10px);
background:
    -o-linear-gradient(45deg,  transparent 10px, #ffffff 10px),
    -o-linear-gradient(135deg, transparent 10px, #ffffff 10px),
    -o-linear-gradient(225deg, transparent 10px, #ffffff 10px),
    -o-linear-gradient(315deg, transparent 10px, #ffffff 10px);
background:
    -webkit-linear-gradient(45deg,  transparent 10px, #ffffff 10px),
    -webkit-linear-gradient(135deg, transparent 10px, #ffffff 10px),
    -webkit-linear-gradient(225deg, transparent 10px, #ffffff 10px),
    -webkit-linear-gradient(315deg, transparent 10px, #ffffff 10px);

padding:9px 9px;
margin-top: -30px;
margin-bottom: -15px;
}

div.boxcornerscutted {
    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;
}

It works perfectly on Chrome, Opera, Safari, Mozilla, but have problems (obviously) on IE.
Any hint how to recreate the same (or similar effect) on IE?

Answer 1

It’s achiavable using JavaScript and jQuery corner, but not in pure CSS.

The -ms-linear-gradient is the thing closest to an IE equivalent, but it’s supported only by IE10.

Earlier IE versions support simple gradients using filter:progid:DXImageTransform.Microsoft.gradient( ... ); and filter:ms-linear-gradient( ... );, but not this kind of gradients.