CSS3 IE9支持

Question

我试图在不使用图像的情况下制作Jagged Edge边框，我还想支持IE9及更高版本。这可能吗？截至目前，它适用于IE9以外的所有产品。任何建议都会很棒！非常感谢。

这是我正在使用的代码。

<div class='demo'></div>


/* Jagged Edge */
 div {
    background: linear-gradient(-135deg, #fff 10px, transparent 0) 0 10px, linear-gradient(135deg, #fff 10px, #333 0) 0 10px;
    background-color: #fff;
    background-size: 20px 20px;

    /* otherwise these will be overridden when you add the inline styles with js. */
    background-position: left bottom !important;
    background-repeat: repeat-x !important;

    padding:1em;
    width:100%;
 }

这是一个jsfiddle ...... http://jsfiddle.net/26uW4/1/

我考虑过使用带有SVG的数据uri。对此的想法？我不确定如何解决这个问题。

Answer 1

至于data-uri svg，请将其放入CSS：

background:url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMC8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+PHN2ZyAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjAiIGhlaWdodD0iMjAiCXZpZXdCb3g9IjAgMCAyMCAxNSIgc3R5bGU9Im92ZXJmbG93OnZpc2libGU7ZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMCAxNSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gZmlsbD0iIzMyMzIzMiIgcG9pbnRzPSIxMCwwIDIwLDEwIDIwLDE1IDAsMTUgMCwxMCAiLz48L3N2Zz4NCg==');

我通过在Adobe Illustrator中绘制路径获得该字符串，导出为SVG，对svg进行base64编码，并将其插入data:image/svg+xml。

有关正常工作的演示，请参阅此JSFiddle。