圆角矩形
Rectangle with rounded sides
如何使用 CSS/SVG/etc 对这些带有圆角 corenrs 的矩形进行编码。图片 :
我尝试用 border-radius 编码,但 border-radius 水平或垂直边是直的。
以及如何编写圆角矩形下脊的代码?
使用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>
如何使用 CSS/SVG/etc 对这些带有圆角 corenrs 的矩形进行编码。图片 :
我尝试用 border-radius 编码,但 border-radius 水平或垂直边是直的。
以及如何编写圆角矩形下脊的代码?
使用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>