Skip to main content
5 de 5
adicionou 83 caracteres ao conteúdo
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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

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 */

/**
 * 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; }
}
<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>

Syzoth
  • 100,5mil
  • 23
  • 169
  • 361