Tabla 2x2 con bordes internos enteros o recortados y coloreados HTML y CSS

Tema en 'Desarrollo web' iniciado por SanMaster, 25 Mar 2023.

Etiquetas:
  1. SanMaster

    SanMaster Administrator Miembro del equipo

    El HTML:
    Insertar CODE, HTML o PHP:
    <div class="tabla-landing">
      <div class="fila">
        <div class="columna borde-verde">
          <h2 class="subtitulo">Subtitulo 1</h2>
          <p class="descripcion">Descripcion 1</p>
    </div>
        <div class="columna borde-rojo">
          <h2 class="subtitulo">Subtitulo 2</h2>
          <p class="descripcion">Descripcion 2</p>
        </div>
      </div>
      <div class="fila">
        <div class="columna borde-amarillo">
          <h2 class="subtitulo">Subtitulo 3</h2>
          <p class="descripcion">Descripcion 3</p>
        </div>
        <div class="columna borde-celeste">
          <h2 class="subtitulo">Subtitulo 4</h2>
          <p class="descripcion">Descripcion 4</p>
        </div>
      </div>
    </div>
    
    Este es el CSS que hay que usar para los bordes intercelda recortados de colores:
    Insertar CODE, HTML o PHP:
    /* tabla 2x2 con bordes internos recortados y de colores*/
    .tabla-landing {
      display: table;
      width: 100%;
      table-layout: fixed;
      margin: 0 auto;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    position: relative;
    right: 50%;
    width: 100vw;
        border-collapse: separate;
    }
    
    .fila {
      display: table-row;
    }
    
    .columna {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      padding: 10px;
    
    }
    
    .subtitulo {
      font-size: 1.5em;
      font-style: italic;
      text-decoration: underline;
    }
    
    .descripcion {
      font-size: 1em;
    }
    
    .borde-verde {
      border: none;
      position: relative;
    }
    .borde-verde:before,
    .borde-verde:after {
      content: "";
      position: absolute;
      border: 10px solid green;
    }
    .borde-verde:before {
      bottom: 0;
      right: 0;
      width: 50%;
      height: 0;
      border-right: none;
      border-bottom: none;
    }
    .borde-verde:after {
      bottom: 0;
      right: 0;
      width: 0;
      height: 50%;
      border-left: none;
      border-top: none;
    }
    
    .borde-rojo {
      border: none;
      position: relative;
    }
    .borde-rojo:before,
    .borde-rojo:after {
      content: "";
      position: absolute;
      border: 10px solid red;
    }
    .borde-rojo:before {
      bottom: 0;
      left: 0;
      width: 50%;
      height: 0;
      border-right: none;
      border-bottom: none;
    }
    .borde-rojo:after {
      bottom: 0;
      left: 0;
      width: 0;
      height: 50%;
      border-right: none;
      border-bottom: none;
    }
    
    .borde-amarillo {
      border: none;
      position: relative;
    }
    .borde-amarillo:before,
    .borde-amarillo:after {
      content: "";
      position: absolute;
      border: 10px solid yellow;
    }
    .borde-amarillo:before {
      top: 0;
      right: 0;
      width: 50%;
      height: 0;
      border-left: none;
      border-top: none;
    }
    .borde-amarillo:after {
      top: 0;
      right: 0;
      width: 0;
      height: 50%;
      border-left: none;
      border-top: none;
    }
    
    .borde-celeste {
      border: none;
      position: relative;
    }
    .borde-celeste:before,
    .borde-celeste:after {
      content: "";
      position: absolute;
      border: 10px solid lightblue;
    }
    .borde-celeste:before {
      top: 0;
      left: 0;
      width: 50%;
      height: 0;
      border-left: none;
      border-top: none;
    }
    .borde-celeste:after {
      top: 0;
      left: 0;
      width: 0;
      height: 50%;
      border-right: none;
      border-bottom: none;
    }
    
    
    Y este es el CSS para crear bordes intercelda completos y de colores
    Insertar CODE, HTML o PHP:
    /*tabla con bordes internos completos y de colores*/
    
    .tabla-landing {
      display: table;
      width: 100%;
      table-layout: fixed;
      margin: 0 auto;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 100vw;
    position: relative;
    right: 50%;
    width: 100vw;
    }
    
    .fila {
      display: table-row;
    }
    
    .columna {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      padding: 10px;
    }
    
    .subtitulo {
      font-size: 1.5em;
      font-style: italic;
      text-decoration: underline;
    }
    
    .descripcion {
      font-size: 1em;
    }
    
    .borde-verde {
      border: 10px solid green;
      border-left: none;
      border-top: none;
      text-align: right;
      vertical-align: bottom;
    }
    
    .borde-rojo {
      border: 10px solid red;
      border-right: none;
      border-top: none;
      text-align: left;
      vertical-align: bottom;
      color: red;
    }
    
    .borde-amarillo {
      border: 10px solid yellow;
      border-left: none;
        border-bottom: none;
      position: relative;
      text-align: right;
      vertical-align: top;
      color: yellow;
    }
    
    .borde-celeste {
      border: 10px solid lightblue;
      border-right: none;
        border-bottom: none;
      position: relative;
      text-align: left;
      vertical-align: top;
      color: lightblue;
    }
     
    Última edición: 25 Mar 2023

Compartir esta página