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

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

/**
 * 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: coresanimadascores-animadas 5s infinite;
}

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

@keyframes coresanimadascores-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>

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

/**
 * 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 */
body {
    background: red;
    background-image: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 100%);
    animation: coresanimadas 5s infinite;
}

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

@keyframes coresanimadas
{
 
    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>

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

/**
 * 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>
adicionou 189 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

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 */
//Apenas para testar a troca de cor de fundo
document.getElementById('troca-cor').onclick = function () {
    document.body.classList.toggle("orange");
};
/**
 * Beveled corners & negative border-radius with CSS gradients
 */

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

.bevel.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;
}
<button id="troca-cor">Troca cor de fundo</button>

<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>
/**
 * 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 */
body {
    background: red;
    background-image: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 100%);
    animation: coresanimadas 5s infinite;
}

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

@keyframes coresanimadas
{

    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>
//Apenas para testar a troca de cor de fundo
document.getElementById('troca-cor').onclick = function () {
    document.body.classList.toggle("orange");
};
/**
 * Beveled corners & negative border-radius with CSS gradients
 */

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

.bevel.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;
}
<button id="troca-cor">Troca cor de fundo</button>

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

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 */
body {
    background: red;
    background-image: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 100%);
    animation: coresanimadas 5s infinite;
}

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

@keyframes coresanimadas
{

    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>
adicionou 139 caracteres ao conteúdo
Fonte Link
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 é possivelpossível aplicar a transparência e assim pode mudar a cor de fundo fácilmentefacilmente.

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

//Apenas para testar a troca de cor de fundo
document.getElementById('troca-cor').onclick = function () {
    document.body.classList.toggle("orange");
};
/**
 * Beveled corners & negative border-radius with CSS gradients
 */

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

.bevel.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;
}
<button id="troca-cor">Troca cor de fundo</button>

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

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

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

document.getElementById('troca-cor').onclick = function () {
    document.body.classList.toggle("orange");
};
/**
 * Beveled corners & negative border-radius with CSS gradients
 */

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

.bevel.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;
}
<button id="troca-cor">Troca cor de fundo</button>

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

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):

//Apenas para testar a troca de cor de fundo
document.getElementById('troca-cor').onclick = function () {
    document.body.classList.toggle("orange");
};
/**
 * Beveled corners & negative border-radius with CSS gradients
 */

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

.bevel.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;
}
<button id="troca-cor">Troca cor de fundo</button>

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

removeu 8 caracteres do conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando