html - Cómo agregar borde a un contenedor con espacios transparentes en el medio

css css3

Question

Aquí hay una imagen del diseño que estoy tratando de lograr solo con CSS.

¿Cómo logro ese borde para el contenedor div para que pueda colocar el logotipo transparente y el texto entre los espacios en blanco? Este diseño irá en un video de fondo. El fondo negro es solo para fines ilustrativos.

Hasta ahora he tratado de lograr algo como esto como prueba:

body {
  background: black;
}
p {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  padding: 30px;
}
.steps-frame-1 {
  margin-top: 60px;
  width: 50%;
  height: 200px;
  margin-left: auto;
  margin-right: auto;
}
.steps-frame-1 {
  border: 0;
  position: relative;
}
.steps-frame-1::after,
.steps-frame-1::before {
  content: '''';
  position: absolute;
  width: 100%;
  height: 45%;
  border: 2px solid #fff;
}
.steps-frame-1::before {
  bottom: 0;
  border-top: 0;
}
.steps-frame-1::after {
  border-bottom: 0;
  top: 0;
}

<div class="steps-frame-1">
  <div class="inner">
    <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy.</p>
  </div>
</div>

jsFiddle

El problema es conseguir el espacio en el borde superior también para el logotipo. Además, todo este contenedor debe ser receptivo.

Cualquier ayuda será apreciada.

Answer 1

Aquí está mi solución:

• Agregue un elemento auxiliar a cada lado de la caja.
• Coloque el logotipo / texto dentro del elemento auxiliar.
• Use pseudo elementos para agregar líneas horizontales / verticales antes y después del logotipo / texto

body {
  color: white;
  background: black;
}
.box {
  position: relative;
  margin: 100px auto 0;
  padding: 80px;
  width: 50%;
}
/**** border helpers ****/
.border {
  position: absolute;
  background-color: rgba(255, 255, 255, .5);
  /* disable these rules to understand what is going on */
  background-color: transparent;
  overflow: hidden;
}
.border-t,
.border-b {
  left: 32px;
  right: 32px;
  height: 64px;
}
.border-t {
  top: 0;
}
.border-b {
  bottom: 0;
}
.border-l,
.border-r {
  top: 32px;
  bottom: 32px;
  width: 64px;
}
.border-l {
  left: 0;
}
.border-r {
  right: 0;
}
/**** logo and text ****/
.border > span {
  position: absolute;
  text-align: center;
}
.border-t span,
.border-b span {
  top: 0;
  left: 10%;
  height: 100%;
}
.border-l span,
.border-r span {
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}
/**** lines ****/
.border span::before,
.border span::after {
  content: "";
  position: absolute;
}
/**** lines (horizontal) ****/
.border-t span::before,
.border-b span::before,
.border-t span::after,
.border-b span::after {
  top: 50%;
  border-top: 1px solid white;
  width: 999px;
}
.border-t span::before,
.border-b span::before {
  right: 100%;
}
.border-t span::after,
.border-b span::after {
  left: 100%;
}
/**** lines (vertical) ****/
.border-l span::before,
.border-r span::before,
.border-l span::after,
.border-r span::after {
  left: 50%;
  border-left: 1px solid white;
  height: 999px;
}
.border-l span::before,
.border-r span::before {
  bottom: 100%;
}
.border-l span::after,
.border-r span::after {
  top: 100%;
}

<div class="box">
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus bibendum finibus ligula sit amet gravida. Sed scelerisque dapibus tempus.</p>
    <p>Curabitur ipsum dui, facilisis at interdum et, feugiat eget tortor. Nunc sodales diam nec nunc sollicitudin, non blandit diam lacinia.</p>
  </div>
  <div class="border border-t"><span><img src="http://lorempixel.com/128/64/abstract/8/"></span></div>
  <div class="border border-b"><span></span></div>
  <div class="border border-l"><span>Integer rhoncus nunc dui, eget.</span></div>
  <div class="border border-r"><span>Curabitur quis mauris eros. In hac habitasse.</span></div>
</div>

Answer 2

Dudo que haya una forma nativa de cortar bordes, por lo que debe dar la ilusión de que es un borde con más contenedores.

Algo como esto debería ser suficiente. Nada sofisticado, por lo que el soporte del navegador tampoco será un problema:

body {
    background: black;
}
p {
    color: #ffffff;
    font-size: 16px;
    text-align:center;
    padding:30px;
}
.steps-frame-1 {
    position: relative;
    margin-top: 60px;
    width: 50%;
    height: 200px;
    margin-left:auto;
    margin-right:auto;
}
.borderColour {
     background-color: #fff;   
}
.borderTopLeft {
     position: absolute;
    top:0;
    left: 0;
    width: 10%;
    height:2px;
}
.borderTopRight {
    position: absolute;
    top:0;
    right: 0;
    width: 80%;
    height:2px;
}
.borderRightTop {
    position: absolute;
    top:0;
    right: 0;
    width: 80%;
    height:2px;
}
.borderRightTop {
    position: absolute;
    top:0;
    right: 0;
    width: 2px;
    height: 45%;
}
.borderRightBottom {
    position: absolute;
    bottom:0;
    right: 0;
    width: 2px;
    height:45%;
}
.borderLeftTop {
    position: absolute;
    top:0;
    left: 0;
    width: 2px;
    height: 45%;
}
.borderLeftBottom {
    position: absolute;
    bottom:0;
    left: 0;
    width: 2px;
    height:45%;
}
.borderBottom {
    position: absolute;
    bottom:0;
    left: 0;
    width: 100%;
    height:2px;
}

<div class="steps-frame-1">
    <div class="borderColour borderTopLeft"></div>
    <div class="borderColour borderTopRight"></div>
    <div class="borderColour borderRightTop"></div>
    <div class="borderColour borderRightBottom"></div>
    <div class="borderColour borderLeftTop"></div>
    <div class="borderColour borderLeftBottom"></div>
    <div class="borderColour borderBottom"></div>
    <div class="inner">
        <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy.</p>
    </div>
    <!-- inner -->
</div>

http://jsfiddle.net/ddn53xsf/3/

Answer 3

Puede usar múltiples imágenes de linear-gradient como fondo para el contenedor div principal como se muestra en el fragmento de abajo. Esta es una forma de lograrlo sin agregar elementos adicionales.

El fondo no necesita ser un color sólido. Este enfoque puede apoyar la transparencia. Lo único que debería tener en cuenta aquí es que, dado que estamos utilizando porcentajes en el linear-gradient , la brecha aumentará a medida que aumente la altura / anchura (y viceversa). Puede ver esto utilizando la opción "Página completa".

La transform: translateX(-50%), translateY(-50%) en los contenedores de texto son para el centrado vertical y horizontal del contenido dentro del espacio.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
p {
  color: #ffffff;
  font-size: 16px;
  text-align: center;
  padding: 30px;
}
.steps-frame-1 {
  position: relative;
  height: 30vw;
  width: 75vw;
  margin: 20px;
  background-image: linear-gradient(to right, beige 5%, transparent 5%, transparent 20%, beige 20%), linear-gradient(to bottom, beige 45%, transparent 45%, transparent 55%, beige 55%), linear-gradient(to bottom, beige 45%, transparent 45%, transparent 55%, beige 55%);
  background-size: 100% 2px, 2px 100%, 2px 100%;
  background-position: top left, top left, top right;
  background-repeat: no-repeat;
  border-bottom: 2px solid beige;
}
.left-text,
.right-text {
  position: absolute;
  top: 50%;
  height: 20px;
  color: beige;
}
.left-text {
  left: 0%;
  transform: translateX(-50%) translateY(-50%);
}
.right-text {
  right: 0%;
  transform: translateX(50%) translateY(-50%);
}
.top-text {
  position: absolute;
  top: 0%;
  left: 12.5%;
  content: url(http://www.planetcassandra.org/wp-content/uploads/2014/03/GitHub_Logo.png);
  width: 15%;
  transform: translateX(-50%) translateY(-50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="steps-frame-1">
  <div class="inner">
    <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy.</p>
  </div>
  <div class=''top-text''></div>
  <div class=''left-text''>Text</div>
  <div class=''right-text''>Text</div>
</div>

Answer 4

Demo

html

<div class="steps-frame-1">
    <div class="inner">
        <p>content Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry''s standard dummy.</p>
        <div class="one">text</div>
        <div class="two">text</div>
        <div class="three">text</div>
        <div class="four">text</div>
    </div>
    <!-- inner -->
</div>

css

body {
    background: black;
}
p {
    color: #ffffff;
    font-size: 16px;
    text-align:center;
    padding:30px;
}
.steps-frame-1 {
    margin-top: 60px;
    width: 50%;
    height: 200px;
    margin-left:auto;
    margin-right:auto;
}
.inner {
    position: relative;
    border: 2px solid #fff;
}
.inner div {
    position: absolute;
    height: 30px;
    line-height: 30px;
    width: 50px;
    background: #000;
    color: #fff;
}
.one {
    top: 0;
    bottom: 0;
    margin: auto;
    left: -25px;
    width: 50px;
    text-align: center;
}
.two {
    top: 0;
    bottom: 0;
    margin: auto;
    right: -25px;
    width: 50px;
    text-align: center;
}
.three {
    top: -15px;
    margin: auto;
    left: 25px;
    width: 50px;
    text-align: center;
}
.four {
    bottom: -15px;
    margin: auto;
    right: 25px;
    width: 50px;
    text-align: center;
}