Seguindo a mesma ideia do Wallace, encontrei este link da *Lea Verou*:

- http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

A diferença é que com isto é possivel aplicar a transparência e assim pode mudar a cor de fundo fácilmente:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    document.getElementById('troca-cor').onclick = function () {
        document.body.classList.toggle("orange");
    };

<!-- language: lang-css -->

    /**
     * Beveled corners & negative border-radius with CSS gradients
     */

    .beveled {    
    	background: #c00; /* fallback */
    	background:
    		linear-gradient(135deg, transparent 10px, #c00 0) top left,
    		linear-gradient(225deg, transparent 10px, #c00 0) top right,
    		linear-gradient(315deg, transparent 10px, #c00 0) bottom right,
    		linear-gradient(45deg,  transparent 10px, #c00 0) bottom left;
    	background-size: 50% 50%;
    	background-repeat: no-repeat;
    }

    .beveled.round {
    	background-image:
    		radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
    		radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
    		radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
    		radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
    }

    /* esta parte a seguir é somente para testes */
    body {
        background: #444;
        font-family: sans-serif;
    }

    body.orange {
        background: #fc0;
    }

    .exemplo {
        width: 200px;
        margin:15px auto;
        padding:13px 15px;
        color: white;
        line-height:1.5;
    }

<!-- language: lang-html -->

    <button id="troca-cor">Troca cor de fundo</button>

    <div class="exemplo beveled">
       foo bar baz<br>foo bar baz<br>foo bar baz
    </div>

    <div class="exemplo beveled round">
       foo bar baz<br>foo bar baz<br>foo bar baz
    </div>

<!-- end snippet -->