Come aggiungere un bordo a un contenitore con spazi trasparenti tra

Question

Ecco un'immagine del disegno che sto cercando di ottenere solo con CSS.

Come posso raggiungere tale confine per il div contenitore in modo che posso mettere il logo trasparente e il testo tra le lacune. Questo design andrà su uno sfondo video. Lo sfondo nero è solo a scopo illustrativo.

Finora ho cercato di realizzare qualcosa di simile come un test:

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

Il problema è quello di ottenere il divario sul bordo superiore, nonché per la logo. Anche questo intero contenitore deve essere reattivo.

Qualsiasi aiuto sarà apprezzato.

Answer 1

È possibile utilizzare più linear-gradient immagini come sfondo per il genitore div contenitore, come mostrato nel seguito frammento. Questo è un modo per ottenerlo senza aggiungere elementi aggiuntivi.

Lo sfondo non deve essere un colore a tinta unita. Questo approccio può supportare la trasparenza. L'unica cosa di cui dovresti tenere conto qui è che, poiché utilizziamo le percentuali nello linear-gradient, il divario aumenterà con l'aumentare dell'altezza/larghezza (e viceversa). Puoi vederlo usando l'opzione "Pagina intera".

Il transform: translateX(-50%), translateY(-50%) sui contenitori di testo è per il centraggio verticale e orizzontale del contenuto all'interno dello spazio.

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 2

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; 
} 

Answer 3

dubito che ci sia un modo nativo per tagliare i bordi, in modo da avere per dare l'illusione che si tratta di una frontiera con più contenitori.

Qualcosa di simile dovrebbe essere sufficiente. Niente di speciale, quindi il supporto del browser, non sarà un problema sia:

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 4

Ecco la mia soluzione:

• Aggiungi un elemento di aiuto su ogni lato della scatola.
• Posizionare il logo/testo all'interno dell'elemento di supporto.
• Usare elementi pseudo per aggiungere linee orizzontali/verticali prima e dopo il logo/testo

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>