自定义形状使用CSS/SVG。

huangapple go评论78阅读模式
英文:

Custom shape with css/svg

问题

自定义形状使用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>
英文:

自定义形状使用CSS/SVG。

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 -->

&lt;div class=&quot;custom-shape&quot;&gt;
  &lt;svg data-name=&quot;Layer 1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;10 0 1110 100&quot; preserveAspectRatio=&quot;none&quot;&gt;
                            &lt;path d=&quot;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&quot; class=&quot;shape-fill&quot;&gt;&lt;/path&gt;
                            &lt;path d=&quot;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&quot; class=&quot;shape-fill-light&quot;&gt;&lt;/path&gt;
                        &lt;/svg&gt;
&lt;/div&gt;

<!-- 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 -->

&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
&lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot;
	 viewBox=&quot;0 0 1601 146&quot; style=&quot;enable-background:new 0 0 1601 146;&quot; xml:space=&quot;preserve&quot;&gt;
&lt;style type=&quot;text/css&quot;&gt;
	.st0{fill:#6FC27C;}
&lt;/style&gt;
&lt;path class=&quot;st0&quot; d=&quot;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&quot;/&gt;
&lt;/svg&gt;

<?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 -->

huangapple
  • 本文由 发表于 2023年6月5日 21:43:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/76407048.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定