CSS에서이 모양을 만들려면 어떻게해야할까요?

Question

CSS에서이 특정 모양을 만들려고 시도하면서 머리를 쓰다듬어 왔습니다. 나는이 모양과 비슷한 다른 모양을 망쳐 놓으려고했지만이 모양을 얻을 수 없습니다. 다음은 내가 만들려고 시도한 모양입니다.

어떤 도움을 주시면 감사하겠습니다. 이 이용 의사 엘레멘트

Answer 1

아마 무언가 :

.container { 
 
    position: relative; 
 
    margin: 20px; 
 
    overflow: hidden; 
 
    width: 340px; 
 
} 
 

 
.box { 
 
    position: relative; 
 
    border-right: 10px solid green; 
 
    border-left: 10px solid green; 
 
    height: 150px; 
 
    width: 320px; 
 
} 
 

 
.container:before { 
 
    content: " "; 
 
    position: absolute; 
 
    border: 10px solid green; 
 
    width: 200%; 
 
    height: 50px; 
 
    top: -43px; 
 
    left: -15px; 
 
    border-radius: 37%; 
 
    background: #fff; 
 
    z-index: 9; 
 
} 
 

 
.container:after { 
 
    content: " "; 
 
    position: absolute; 
 
    border: 10px solid green; 
 
    width: 200%; 
 
    height: 50px; 
 
    bottom: -43px; 
 
    left: -15px; 
 
    border-radius: 37%; 
 
    background: #fff; 
 
    z-index: 9; 
 
}

<div class="container"> 
 
    <div class="box"> 
 
    </div> 
 
</div>

트릭 경계 반경과 유사 요소의 폭을 갖는 커브를 제어하는 ​​것이다. 이 값으로 재생할 수 있으며 결과를 볼 수 있습니다 (위쪽/왼쪽/아래쪽도 조정해야 할 수도 있음)