So fügen Sie einen Rahmen zu einem Container mit transparenten Lücken zwischen

Question

hinzu

Hier ist ein Bild des Designs, das ich versuche, nur mit CSS zu erreichen.

Wie kann ich eine solche Grenze für den Container div erreichen, so dass ich transparent Logo und Text zwischen den Lücken platzieren können. Dieser Entwurf wird auf einem Videohintergrund gehen. Der schwarze Hintergrund dient nur zur Veranschaulichung.

Bisher habe ich versucht, so etwas wie dies als Test zu erreichen:

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

Das Problem ist, die Lücke an der Spitze Grenze als auch für die bekommen Logo. Auch dieser ganze Behälter muss ansprechen.

Jede Hilfe wird geschätzt.

Answer 1

Sie können mehr linear-gradient Bilder als Hintergrund für die übergeordneten div Behälter verwenden wie in der weiter unten Schnipsel. Dies ist eine Möglichkeit, dies zu erreichen, ohne zusätzliche Elemente hinzuzufügen.

Der Hintergrund muss keine Volltonfarbe sein. Dieser Ansatz kann Transparenz unterstützen. Das einzige, was Sie hier notieren müssen, ist, dass, da wir Prozentsätze in der linear-gradient verwenden, die Lücke mit zunehmender Höhe/Breite zunimmt (und umgekehrt). Sie können dies sehen, indem Sie die Option "Vollständige Seite" verwenden.

Die transform: translateX(-50%), translateY(-50%) Textcontainer dienen zur vertikalen und horizontalen Zentrierung des Inhalts im Raum.

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

Ich bezweifle, dass es eine native Art und Weise, die Grenzen zu schneiden, so dass Sie die Illusion geben, dass es eine Grenze mit mehr Behältern.

So etwas sollte ausreichen. Nichts Besonderes, so Browser-Unterstützung wird kein Problem sein, entweder:

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

Hier ist meine Lösung:

• auf jeder Seite der Box ein Helfer Element hinzufügen.
• Platzieren Sie das Logo/den Text im Helferelement.
• Verwenden Pseudoelemente horizontale/vertikale Linien vor und nach dem Logo/Text

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>