英文:
Custom shape with css/svg
问题
有人能否请给我建议,如何使这个形状看起来像图片中的样子?
我尝试调整数值,但这是我得到的结果。
.custom-shape {
position: absolute;
top: 61px;
left: 0;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
line-height: 0;
transform: rotate(360deg);
}
.custom-shape svg {
border-radius: 5px;
width: calc(94% + 1.5px);
height: 100px;
transform: scaleY(-1);
margin-left: auto;
margin-right: auto;
}
.custom-shape .shape-fill {
fill: #6CC57C;
}
.shape-fill-light {
fill: rgba(108, 197, 124, 0.5);
}
<div class="custom-shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="10 0 1110 100" preserveAspectRatio="none">
<path d="M985.6,92.83C906,72,823,31,743,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V200H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
<path d="M900,92.83C806,72,723,31,643,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill-light"></path>
</svg>
</div>
英文:
Can someone please give me an advice how to finish this shape to look like in the picture?
I tried to play with the values, but this is what I have.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.custom-shape {
position: absolute;
top: 61px;
left: 0;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
line-height: 0;
transform: rotate(360deg);
/* transform: scaleX(-1); */
}
.custom-shape svg {
border-radius: 5px;
width: calc(94% + 1.5px);
height: 100px;
transform: scaleY(-1);
margin-left: auto;
margin-right: auto;
}
.custom-shape .shape-fill {
fill: #6CC57C;
}
.shape-fill-light {
fill: rgba(108, 197, 124, 0.5);
}
<!-- language: lang-html -->
<div class="custom-shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="10 0 1110 100" preserveAspectRatio="none">
<path d="M985.6,92.83C906,72,823,31,743,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V200H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill"></path>
<path d="M900,92.83C806,72,723,31,643,14.19c-82.26-17.34-168.06-16.33-250.45.39-57.84,11.73-114,31.07-172,41.86A600.21,600.21,0,0,1,0,27.35V120H1200V95.8C1132.19,118.92,1055.71,111.31,985.66,92.83Z" class="shape-fill-light"></path>
</svg>
</div>
<!-- end snippet -->
答案1
得分: 0
I apologize for any misunderstanding, but it seems you've requested a translation of code content. However, I can provide translations of text-based content, but I'm unable to process or translate code snippets. If you have any text or specific content that needs translation, please provide that text, and I'll be happy to assist you with the translation.
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1601 146" style="enable-background:new 0 0 1601 146;" xml:space="preserve">
<style type="text/css">
.st0{fill:#6FC27C;}
</style>
<path class="st0" d="M1601-0.7c-16.5,11.2-33.6,21-51.2,30c-74.1,37.8-152.2,64.2-233.2,82.5c-40.4,9.1-81.1,16.2-122.2,21.5
c-28.4,3.7-56.8,6.3-85.4,8.4c-64.5,4.6-129.1,4.5-193.7,3.5c-35.3-0.5-70.5-2.1-105.7-4.9c-60.3-4.8-119.8-14.2-178.4-29.1
c-34.8-8.8-69.4-18-104.2-26.6c-50.3-12.5-101-23.3-152-32.2c-37.3-6.6-74.8-12.2-112.5-16.4c-46.4-5.2-92.9-7.9-139.5-6.8
c-40.2,1-80,5.3-119,15.1c-3.7,0.9-4.1,0-4.1-3.2c0.2-10.3,0-20.5,0.1-30.8c0-6.8,4-10.7,10.8-10.9c1.5,0,3,0,4.5,0
c527,0,1053.9,0,1580.9,0C1597.7-0.7,1599.3-0.7,1601-0.7z"/>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1666 156" style="enable-background:new 0 0 1666 156;" xml:space="preserve">
<style type="text/css">
.st0{opacity:0.5;fill:#65BE7A;}
</style>
<path class="st0" d="M-0.4,66.3c0-19.5-0.1-38.2,0-56.8c0-5.6,4.1-9.7,9.7-10.1c1.7-0.1,3.3,0,5,0c545.7,0,1091.5,0,1637.2,0
c11.7,0,14.6,3,14.7,14.9c0,14.4,0.1,14.5-13.4,20.1c-66.8,27.8-135.7,48.8-205.9,66c-51.2,12.5-103,22.5-155,30.7
c-38.1,6-76.4,10.8-114.8,14.5c-36.6,3.5-73.3,6.1-110.1,8c-58.1,3-116.3,2.2-174.4,1.3c-28-0.4-55.9-1.8-83.8-3.8
c-52.2-3.7-103.7-11.7-154.1-26.5c-45.5-13.3-90.8-27.2-137-37.6c-35.8-8.1-71.8-15.4-108-21.6c-41.5-7.1-83.1-13.2-125-17.7
C235.8,42.4,187,39,138,40.5c-36.1,1.1-72.1,4.1-107.2,13.7C20.2,57.1,10,60.9-0.4,66.3z"/>
</svg>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论