JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="gradientDemo" style="padding: 30px;">
    <div class="beveledRT">Test Beveled right top</div>  
  <div class="beveled">test Beveled</div>
  <div class="round">test Round</div>
</div>

CSS

/*Beveled corners & negative border-radius with CSS3 gradients*/
 .gradientDemo div {
    width: 200px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    margin: 20px auto;
  }
.beveledRT {
  background: -moz-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
  background: -webkit-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
  background: -ms-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
  background: -o-linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
  background: linear-gradient(220deg, transparent 10px, #ad1c1c 10px);
}   
.beveled {
   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);
   }

.round {
       background:
        -moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
        -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
       background:
         -o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
         -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00...