使用css/svg自定义形状

pbpqsu0x 于 2023-06-07 发布在其他

关注(0)|答案(1)|浏览(207)

有人能给予我一个建议，如何完成这个形状看起来像在图片？
我试着玩弄价值观，但这就是我所拥有的。

.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);
}

<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

来源：https://stackoverflow.com/questions/76407048/custom-shape-with-css-svg

1条答案

按热度按时间

hjzp0vay1#

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

赞(0）回复(0）举报 2023-06-07

我来回答

使用css/svg自定义形状

1条答案

相关问题

热门标签

最新问答