Cómo crear espaciado de esquina de borde en CSS

Solución:

No puedes hacerlo usando solo border pero puedes lograr esto usando after y box-shadows

ver más sobre after y box-shadow

div {
  width: 200px;
  height: 100px;
  background: #BB67E0;
  position: relative;
  margin: 50px;
  text-align: center;
  line-height: 100px;
  font-size:30px;
  color:#fff;
}
div:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 80px;
  background: black;
  left: -10px;
  top: 10px;
  box-shadow: 220px 0 0 0 black;
}
div:before {
  position: absolute;
  content: "";
  height: 2px;
  width: 180px;
  background: black;
  left: 10px;
  top: -10px;
  box-shadow: 0 120px 0 0 black;
}

<div>content div</div>

Si desea usar la altura relativa, tendrá que eliminar el borde inferior o puede usar jquery para cambiar la posición del box-shadow

Nota: he dado contenteditable al div para ver el cambio cuando se agrega más contenido

div {
  width: 200px;
  min-height: 100px;
  background: #BB67E0;
  position: relative;
  margin: 50px;
  text-align: center;
  line-height: 100px;
  font-size:30px;
  color:#fff;
}
div:after {
  position: absolute;
  content: "";
  width: 2px;
  height: 90%;
  background: black;
  left: -10px;
  top: 5%;
  box-shadow: 220px 0 0 0 black;
}
div:before {
  position: absolute;
  content: "";
  height: 2px;
  width: 90%;
  background: black;
  left: 10px;
  top: -10px;
}

<div contenteditable="true">content div</div>

Editar: Esto puede cambiar el ancho y la altura de acuerdo con su necesidad. Obtuve la idea Idea de la maravillosa respuesta de misterMansam.

div {
  width: 200px;
  min-height: 100px;
  background: #BB67E0;
  position: relative;
  margin: 50px;
  text-align: center;
  line-height: 100px;
  font-size:30px;
  font-size:30px;
  color:#fff;
  color:#fff;
}
div:after {
  position: absolute;
  content: "";
  width: 90%;
  left:5%;
  top:0;
  height:110%;
  top:-5%;
  border-top:2px solid black;
  border-bottom:2px solid black;
}
div:before {
  position: absolute;
  content: "";
  width: 110%;
  left:-5%;
  top:0%;
  height:100%;
  border-left:2px solid black;
  border-right:2px solid black;
}

<div contenteditable="true">Content</div>

Admito que este enfoque es una locura, pero, como experimento, si solo admite el navegador moderno y juega un poco clip-path utilizando

propiedad (utilizada para cortar las esquinas) puede intentar esto:

div {
  width: 300px;
  padding: 10px;
  margin: 50px;
  background: violet;
  background-clip: content-box;
  border: 3px #000 solid;

  clip-path: polygon(0 20%, 10px 20%, 10px 10px, 15% 10px, 15% 0, 
     85% 0, 85% 10px, calc(100% - 10px) 10px, calc(100% - 10px) 20%, 100% 20%, 
     100% 80%, calc(100% - 10px) 80%, calc(100% - 10px) calc(100% - 10px), 
     85% calc(100% - 10px), 85% 100%, 15% 100%, 15% calc(100% - 10px), 
     10px calc(100% - 10px), 10px 85%, 0 85%);

  -webkit-clip-path: polygon(0 20%, 10px 20%, 10px 10px, 15% 10px, 15% 0, 85% 0, 
     85% 10px, -webkit-calc(100% - 10px) 10px, -webkit-calc(100% - 10px) 20%, 
     100% 20%, 100% 80%, -webkit-calc(100% - 10px) 80%, 
     -webkit-calc(100% - 10px) -webkit-calc(100% - 10px), 
     85% -webkit-calc(100% - 10px), 85% 100%, 15% 100%, 15% 
     -webkit-calc(100% - 10px), 10px -webkit-calc(100% - 10px), 10px 85%, 0 85%);

}

^{Algunos valores están en porcentaje, es por eso que las líneas verticales son más cortas en el div más alto (esto se puede resolver usando valores fijos de todos modos), pero como puede ver, la altura no está involucrada en la solución. Otro beneficio de este enfoque es la capacidad de respuesta (intente estirar el panel de salida del codepen)}

• : Mentí. en realidad no es solo “un poco” 🙂 :before Flexible en los cuatro lados
• los :after pseudo elemento crea el borde izquierdo y derecho
• los toppseudo elemento crea el borde superior e inferior rightEl espaciado de los bordes se controla con bottom, left ,

, y

(tener una propiedad tanto a la izquierda como a la derecha estira el elemento entre ellos, al igual que la parte superior e inferior)

Aquí hay una buena forma de visualizar cómo se distribuyen los pseudo elementos:

div {
  background: purple;
  height: 50vh;
  width: 50vw;
  margin: 50px auto;
  position: relative;
  min-height: 200px;
  min-width: 200px;
}
div:before,
div:after {
  content: '';
  position: absolute;
  top: 60px;
  left: -20px;
  right: -20px;
  bottom: 60px;
  border: solid 4px #000;
}
div:before {
  border-top: none;
  border-bottom: none;
}
div:after {
  top: -20px;
  left: 60px;
  right: 60px;
  bottom: -20px;
  border-left: none;
  border-right: none;
}

<div></div>

Ilustración de solución

Ejemplo

---

---

Utiliza Nuestro Buscador