如何用边框创建形状？

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