Seguindo a ideia semelhante a 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 é possível aplicar a transparência e assim pode mudar a cor de fundo facilmente.

No exemplo tem borda arredonda invertida e também cantos em corte diagonal (chanfro).

> Note que no exemplo tanto dentro de `linear-gradient` quano dentro de `radial-gradient` tem `#fff`, para trocar a cor do elemento troque estes `#fff`, e deve ser feito o mesmo em:
>
>     background: #fff; /* fallback */

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

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

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

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

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

    /* esta parte a seguir é somente para testes */
    html, body {
    	height: 100%;
    }

    body {
        background: red;
        background-image: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 100%);
        background-repeat: no-repeat;
        animation: cores-animadas 5s infinite;
    }

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

    @keyframes cores-animadas
    {
        0%   { background-color: red; }
        20%  { background-color: green; }
        40%  { background-color: blue; }
        60%  { background-color: violet; }
        80%  { background-color: orange; }
        100% { background-color: red; }
    }

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

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

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

<!-- end snippet -->