둥근면이있는 직사각형

Question

CSS/SVG/등을 사용하여 둥근 코어를 사용하여이 직사각형을 어떻게 코딩 할 수 있습니까? 사진 :

나는 국경 반경이 코딩했지만, 국경 반경 수평 또는 수직면은 직선이다.

그리고 어떻게 둥근 사각형의 낮은 능선을 코딩 할 수 있습니까?

Answer 1

svg의 베 지어 곡선을 사용하십시오.

는

.container { 
 
    position: relative; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
} 
 
.shape { 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 
.content { 
 
    position: relative; 
 
    width: 400px; 
 
    padding: 4em 3em; 
 
    box-sizing: border-box; 
 
    color: #FFEFE3; 
 
    font-size: 13.1px; 
 
}

<div class="container"> 
 
    <svg class="shape" width="400" height="100%" viewBox="-1 -1 401 158" preserveAspectRatio="none"> 
 
    <path fill="#FFAC61" d="M0 75 c1 -30 4 -60 30 -65 q200 -20 343 0 c20 6 24 40 25 65 c0 25 -6 57 -27 65 c-90 17 -210 6 -240 7 c-10 -1 -20 0 -40 8 c-7 0 -10 -1 -15 -8 c-4 -4 -20 -6 -50 -7 c-30 -10 -23 -57 -27.5 -73" /> 
 
    </svg> 
 
    <div class="content">The English Wikipedia is the English-language edition of the free online encyclopedia Wikipedia.</div> 
 
</div>