Esquinas recortadas en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite una forma en esquinas recortadas - cutout corners en CSS3...

<style>
  main{
    width: 100%;
    padding: 60px 0;
  }
  .bevel-corners{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
  }
  .bevel-corners > div{
    width: 249px;
    color: #FFF;
    padding: 1.2em 1.8em;
    hyphens: auto;
    text-align: justify;
    background: #b4a078;
  }
  .bevel-corners > p{
    width: 116px;;
  }
  .bevel-corners:nth-of-type(1) > div{
    background: linear-gradient(45deg, transparent 12px, #b4a078 13px) bottom left, 
                linear-gradient(135deg, transparent 12px, #b4a078 13px) top left, 
                linear-gradient(-135deg, transparent 12px, #b4a078 13px) top right, 
                linear-gradient(-45deg, transparent 12px, #b4a078 13px) bottom right;
    background-size: 51% 51%;
    background-repeat: no-repeat;
  }
  .bevel-corners:nth-of-type(2) > div{
    background: radial-gradient(circle at bottom left, transparent 15px, #b4a078 16px) bottom left, 
                radial-gradient(circle at top left, transparent 15px, #b4a078 16px) top left, 
                radial-gradient(circle at top right, transparent 15px, #b4a078 16px) top right, 
                radial-gradient(circle at bottom right, transparent 15px, #b4a078 16px) bottom right;
    background-size: 51% 51%;
    background-repeat: no-repeat;
  }
  .bevel-corners:nth-of-type(3) > div{
    padding: 0 9px;
    border: 18px solid transparent;
    border-image: 1 url('dаta:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%23b4a078"><polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/> </svg>');
    background-clip: padding-box;
  }
  .bevel-corners:nth-of-type(4) > div{
    clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
    transition: 1s clip-path;
  }
  .bevel-corners:nth-of-type(4):hover > div{
    clip-path: polygon(0 0, 0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%);
  }
</style>

  <main>
    <div class="bevel-corners">
      <p>① linear-gradient</p>
      <div>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad..</div>
    </div>
    <div class="bevel-corners">
      <p>② radial-gradient</p>
      <div>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad..</div>
    </div>
    <div class="bevel-corners">
      <p>③ Inline SVG</p>
      <div>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad..</div>
    </div>
    <div class="bevel-corners">
      <p>④ clip-path</p>
      <div>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad..</div>
    </div>
</main>

Ver resultado