Cách thêm đường viền vào vùng chứa có khoảng trống trong suốt ở giữa

Question

Đây là hình ảnh về thiết kế mà tôi đang cố gắng đạt được chỉ với CSS.

Làm thế nào để đạt được biên giới như vậy cho div chứa để tôi có thể đặt logo trong suốt và văn bản ở giữa các khoảng trống. Thiết kế này sẽ xuất hiện trên nền video. Nền đen chỉ nhằm mục đích minh họa.

Cho đến nay tôi đã cố gắng để đạt được một cái gì đó như thế này như một thử nghiệm:

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

Vấn đề là để có được sự chênh lệch về biên giới hàng đầu cũng cho Logo. Ngoài ra toàn bộ container này phải đáp ứng.

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Bạn có thể sử dụng nhiều linear-gradient hình ảnh làm nền cho phụ huynh div container như hiển thị trong bên dưới đoạn trích. Đây là một cách để đạt được nó mà không cần thêm bất kỳ yếu tố bổ sung nào.

Nền không cần phải là màu đồng nhất. Cách tiếp cận này có thể hỗ trợ tính minh bạch. Điều duy nhất bạn cần lưu ý ở đây là vì chúng tôi đang sử dụng tỷ lệ phần trăm trong số linear-gradient, khoảng cách sẽ tăng khi chiều cao/chiều rộng tăng (và ngược lại). Bạn có thể thấy điều này bằng cách sử dụng tùy chọn "Toàn bộ trang".

transform: translateX(-50%), translateY(-50%) trên các vùng chứa văn bản là để căn giữa và ngang của nội dung trong không gian.

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

tôi nghi ngờ có một cách tự nhiên để cắt biên giới, vì vậy bạn phải từ bỏ ảo tưởng rằng nó là một biên giới với nhiều thùng chứa hơn.

Điều gì đó như thế này là đủ. Không có gì lạ mắt, do đó hỗ trợ trình duyệt sẽ không là một vấn đề hoặc là:

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

Đây là giải pháp của tôi:

• Thêm yếu tố một helper trên mỗi bên của hộp.
• Đặt logo/văn bản bên trong phần tử trợ giúp.
• Sử dụng các yếu tố giả để thêm đường ngang/dọc trước và sau khi logo/văn bản

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>