需要內部div與外部div重疊（都需要透明度）

Question

我真的可以使用你的幫助。

我有一個內部div需要延伸過去的外部股利...這部分不是問題。我的問題是，我需要幫助製作內部div擴展的外部div剪輯。問題是，它們都需要透明。

請參閱下面的圖片瞭解我想達到的目標。

inner and outer div image

這是我到目前爲止有：

CSS：

.infoBoxOuter { 
    border: 10px solid #ffffff; 
    padding: 50px; 
    width: 300px; 
} 
.infoBoxInner { 
    width: 350px; 
} 

HTML：

<div class="infoBoxOuter"> 
    <div class="infoBoxInner"> 
    <h1 class="white">Lorem Ipsum dolor</h1> 
    </div> 
</div> 

任何幫助是極大的讚賞。謝謝。

Answer 1

由於需要透明度，我認爲你基本上看的兩種可能性之一：

1. 在側
2. 使用的SVG的邊界形狀與切口獲得頂部，左，底部邊界以這種或那種方式邊界（最容易在.infoBoxOuter上用邊框），然後使用一個或多個僞元素來創建具有間隙的右側。

下面是方法＃2的一個例子。您可以將右上角的行作爲一個僞元素，將右下角的行作爲另一個，或者可以執行下面所做的操作，並使用漸變在白色和透明之間切換。

您可以根據需要調整數字以適應您的情況。我只是試圖獲得與您的示例圖像大致相似的內容，以便讓您瞭解其工作原理。

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    background: linear-gradient(to bottom, midnightblue, steelblue); 
 
} 
 
.infoBoxOuter { 
 
    color: white; 
 
    border-top: 10px solid #ffffff; 
 
    border-left: 10px solid #ffffff; 
 
    border-bottom: 10px solid #ffffff; 
 
    padding: 50px; 
 
    width: 150px; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
} 
 
.infoBoxOuter::after { 
 
    content: ''; 
 
    display: block; 
 
    background: linear-gradient(to bottom, white, white 25px, transparent 25px, transparent 140px, white 140px, white); 
 
    width: 10px; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 
.infoBoxInner { 
 
    width: 350px; 
 
    box-sizing: border-box; 
 
}

<div class="infoBoxOuter"> 
 
    <div class="infoBoxInner"> 
 
    <h1 class="white">Lorem Ipsum dolor</h1> 
 
    </div> 
 
</div>