ボーダーでシェイプを作成する方法は？

Question

画像の上に位置する境界線を持つ黒いグラフィック要素を作成したいと思います。

私は：beforeと：afterを使ってみましたが、境界は複雑です。どんな助けでも大歓迎です。

あなたはグラフィック要素は、現在、以下のコードは、私は写真のような形状を作成する方法であるボーダー半径

と正方形であるため、飼料は、国境の下に起こっていることを写真で見ることができますが、それは

障害のあるフィードは国境を上回ったことから：

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