如何用邊框創建形狀？

Question

我想創建一個黑色的圖形元素，其邊界位於圖片視頻饋送的上方。

我嘗試過使用：之前和之後：但邊界複雜的東西。任何幫助將不勝感激。

您可以在照片中看到，進料將會邊框下方，由於圖形元素是目前邊框半徑

正方形下面的代碼是我如何創建爲描繪的形狀，但它是故障自進入飼料上方邊框：

div.wrap1{ 
    position: fixed; 
    height: 90vh; 
    bottom: 0; 
    left: 0; 
    width: 80vw; 
    margin-left: -120px; 

    .graphic-bg-1{ 
     z-index: 5; 
     border: 3px solid #3AD8FF; 
     border-bottom: none; 
     border-radius: 120px; 
     position: relative; 
     width: 100%; 
     height: 100%; 
    } 

    .mask{ 
     position: absolute; 
     height: 500px; 
     width: 100%; 
     background-color: black; 
     bottom: 0; 
     // margin-left: -120px; 
     z-index: 6; 
    } 
} 

div.wrap2{ 
    position: fixed; 
    height: 75vh; 
    width: 100vw; 
    right: 0; 
    bottom: 10vh; 
    margin-right: calc(-80vw + 123px); 
    z-index: 7; 

    .graphic-bg-2{ 
     z-index: 8; 
     border: 3px solid #3AD8FF; 
     border-top: transparent; 
     border-radius: 120px; 
     position: relative; 
     width: 100%; 
     height: 100%; 
    } 

    .mask2{ 
     position: absolute; 
     height: 109px; 
     width: calc(100% - 3px); 
     background-color: black; 
     top: 0; 
     right: 0; 
     z-index: 8; 
    } 
} 

Answer 1

<div class="first-element"></div> 
<div class="secound-element"></div> 

.first-element{ 
    width: 150px; 
    height: 100px; 
    margin-top: 20px; 
    border-top: 1px solid #000; 
    border-right: 1px solid #000; 
    border-top-right-radius: 30px; 
    float:left; 
} 
.secound-element{ 
    float:left; 
    width: 150px; 
    height: 100px; 
    margin-top: 70px; 
    border-bottom: 1px solid #000; 
    border-left: 1px solid #000; 
    border-bottom-left-radius: 30px; 
    margin-left:-1px; 

} 

Try this it might helpful