Beveled corners & negative border-radius with CSS3 gradients

by nilloc

HTML

<div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div>
<div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div>
<div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div>
<div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div><div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div><div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div><div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div><div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div>
<div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div>
<div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div>
<div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div>
<div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div>
<div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div>
<div>By using gradients</div>

<div class="thinner-outline">And filter:shadow(...)</div>
<br>
<div class="statement">chamfers too</div>
<div>By using gradients</div>

<div class="thinner-outline">And...

CSS

body{background:gray;}

div {
  --font-size:16px;
  
  font-family:monospace;
  font-size:var(--font-size); 
  
  
  
  /* ALERT font-size determines maxumum corner size */
  
    /* background: #c00; */ /* fallback */
/*     background:
        -moz-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -moz-linear-gradient(135deg, transparent 10px, #c00 10px),
        -moz-linear-gradient(225deg, transparent 10px, #c00 10px),
        -moz-linear-gradient(315deg, transparent 10px, #c00 10px);
    background:
        -o-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -o-linear-gradient(135deg, transparent 10px, #c00 10px),
        -o-linear-gradient(225deg, transparent 10px, #c00 10px),
        -o-linear-gradient(315deg, transparent 10px, #c00 10px);
    background:
        -webkit-linear-gradient(45deg,  transparent 10px, #c00 10px),
        -webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
        -webkit-linear-gradient(315deg, transparent 10px, #c00 10px); */
    background-image:
      linear-gradient(45deg,  transparent var(--font-size), #c00 calc(var(--font-size) - 1px)),
      linear-gradient(-45deg, transparent var(--font-size), #c00 calc(var(--font-size) - 1px)),
      linear-gradient(225deg, transparent var(--font-size), #c00 calc(var(--font-size) - 1px)),
      linear-gradient(-225deg, transparent var(--font-size), #c00 calc(var(--font-size) - 1px));
    
        
    /* filter: drop-shadow(0px 2px 1px hsla(0,0%,0%,0.3)); */
    
    filter: 
      drop-shadow(1px 1px 0px white)
      drop-shadow(-1px -1px 0px white)
      drop-shadow(1px -1px 0px white)
      drop-shadow(-1px 1px 0px white)
      drop-shadow(1px 0px 0px white) 
      drop-shadow(-1px 0px 0px white)  
      drop-shadow(0px 1px 0px white) 
      drop-shadow(0px -1px 0px white) 
      drop-shadow(0px 3px 1px rgba(0,0,0,0.1));

margin-bottom:10px;

}

.thinner-outline{
  filter: 
     ...