尝试重新创建特征/形状

Question

我在这里找到该网站的图片：

我想知道紫色和白色部分之间的底部波浪形部分如何。

我的第一个想法是使用剪切路径，但是我对此不太熟悉。我的第二个想法是使用一些形状尝试重新创建此形状，但这似乎并不是解决此问题的最佳方法。

有什么想法或想法吗？

Answer 1

使用SVG（可缩放矢量图形）作为剪切路径。如果制作SVG并按比例放大，则可以使用它以SVG的形状裁剪背景。要获得此特定设计，可以使用Inkscape（最好的免费SVG编辑器）或Illustrator（如果可以承受的话）来设计形状。

这是一个来自codepen的例子：

#shape-container {
  background-image: url('https://www.w3schools.com/css/klematis_big.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}

<div id="shape-container">
    <svg width="1245px" height="780px" viewBox="0 0 1245 780" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g>
            <clipPath id="shape-top">
                <polygon points="1,95,1,0,979,0,424,379,1,95px"></polygon>
            </clipPath>
            <clipPath id="shape-left">
                <polygon points="1,95,424,379,1,668,1,95"></polygon>
            </clipPath>
        </g>
        <image clip-path="url(#shape-top)" width="1245" height="780" xlink:href="https://www.w3schools.com/css/klematis4_big.jpg" preserveAspectRatio="xMidYMin slice"></image>
        <image clip-path="url(#shape-left)" width="100%" height="100%" xlink:href="https://www.w3schools.com/bootstrap/cinqueterre.jpg" preserveAspectRatio="xMidYMin slice"></image>
    </svg>
</div>

编辑：

我不会为您编写代码，这不是堆栈溢出的用途，但是我将为您提供一个SVG路径，您可以将其用作完成操作的灵感。试一下大小和其他内容，看看这是否对您的请求有所帮助。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 640 640" width="640" height="640">
    <defs>
        <path d="M41 604L959 604" id="b4hRkibCzL"></path>
        <path d="M-807.1 671.89L-807.1 -22.11" id="aJGvCq9Ld"></path>
        <path d="M754.04 792.17L754.04 98.17" id="a2BjBBZ1Jf"></path>
        <path d="M-21.55 256.93L-12.55 245.98L-2.55 235.04L6.45 224.59L15.45 214.14L24.45 204.19L34.45 194.74L43.45 185.78L52.45 177.32L61.45 169.86L71.45 163.39L80.45 157.42L89.45 152.45L99.45 147.97L108.45 144.99L117.45 143L126.45 142L136.45 142L145.45 143L154.45 144.99L163.45 147.97L173.45 152.45L182.45 157.42L191.45 163.39L201.45 169.86L210.45 177.32L219.45 185.78L228.45 194.74L238.45 204.19L247.45 214.14L256.45 224.59L265.45 235.04L275.45 245.98L284.45 256.93L293.45 267.87L303.45 278.82L312.45 289.27L321.45 299.72L330.45 309.67L340.45 319.12L349.45 328.08L358.45 336.53L367.45 344L377.45 350.46L386.45 356.43L395.45 361.41L405.45 365.89L414.45 368.87L423.45 370.86L432.45 371.86L442.45 371.86L451.45 370.86L460.45 368.87L469.45 365.89L479.45 361.41L488.45 356.43L497.45 350.46L507.45 344L516.45 336.53L525.45 328.08L534.45 319.12L544.45 309.67L553.45 299.72L562.45 289.27L571.45 278.82L581.45 267.87L590.45 256.93L599.45 245.98L609.45 235.04L618.45 224.59L627.45 214.14L636.45 204.19L646.45 194.74L655.45 185.78L664.45 177.32L673.45 169.86L683.45 163.39L692.45 157.42L701.45 152.45L711.45 147.97L720.45 144.99L729.45 143L738.45 142L748.45 142L757.45 143L766.45 144.99L775.45 147.97L785.45 152.45L794.45 157.42L803.45 163.39L813.45 169.86L822.45 177.32L831.45 185.78L840.45 194.74L850.45 204.19L859.45 214.14L868.45 224.59L877.45 235.04L887.45 245.98L896.45 256.93" id="c6gYkOZIbc"></path>
        <path d="M288.61 290.61C288.61 361.98 217.2 419.91 129.24 419.91C41.28 419.91 -30.13 361.98 -30.13 290.61C-30.13 219.25 41.28 161.31 129.24 161.31C217.2 161.31 288.61 219.25 288.61 290.61Z" id="dnajv2alU"></path>
        <path d="M398.83 394.81C398.83 466.17 327.41 524.11 239.45 524.11C151.49 524.11 80.08 466.17 80.08 394.81C80.08 323.45 151.49 265.51 239.45 265.51C327.41 265.51 398.83 323.45 398.83 394.81Z" id="fdGDhcwxN"></path>
        <path d="M625.71 462.92C625.71 534.29 554.3 592.22 466.34 592.22C378.38 592.22 306.96 534.29 306.96 462.92C306.96 391.56 378.38 333.62 466.34 333.62C554.3 333.62 625.71 391.56 625.71 462.92Z" id="dNZoIoCMk"></path>
        <path d="M780.42 415.56C780.42 486.93 709.01 544.87 621.05 544.87C533.09 544.87 461.68 486.93 461.68 415.56C461.68 344.2 533.09 286.26 621.05 286.26C709.01 286.26 780.42 344.2 780.42 415.56Z" id="a5PN3oIKQ"></path>
        <path d="M836.51 352.57C836.51 423.93 765.1 481.87 677.14 481.87C589.18 481.87 517.76 423.93 517.76 352.57C517.76 281.21 589.18 223.27 677.14 223.27C765.1 223.27 836.51 281.21 836.51 352.57Z" id="mmmdIctph"></path>
        <path d="M749.52 572.29C749.52 643.65 547.41 701.59 298.47 701.59C49.52 701.59 -152.59 643.65 -152.59 572.29C-152.59 500.92 49.52 442.98 298.47 442.98C547.41 442.98 749.52 500.92 749.52 572.29Z" id="d5EhBzC2WL"></path>
        <path d="M561.37 455.12C561.37 526.48 359.26 584.42 110.32 584.42C-138.63 584.42 -340.74 526.48 -340.74 455.12C-340.74 383.75 -138.63 325.81 110.32 325.81C359.26 325.81 561.37 383.75 561.37 455.12Z" id="b4ZW7wUE7Y"></path>
        <path d="M970.02 262.36C970.02 333.72 898.61 391.66 810.65 391.66C722.69 391.66 651.27 333.72 651.27 262.36C651.27 191 722.69 133.06 810.65 133.06C898.61 133.06 970.02 191 970.02 262.36Z" id="ev4URzEBW"></path>
        <path d="M856.51 372.57C856.51 443.93 785.1 501.87 697.14 501.87C609.18 501.87 537.76 443.93 537.76 372.57C537.76 301.21 609.18 243.27 697.14 243.27C785.1 243.27 856.51 301.21 856.51 372.57Z" id="elqPiiaJT"></path>
    </defs>
    <g>
        <g>
            <g>
                <use xlink:href="#b4hRkibCzL" opacity="1" fill="#000000" fill-opacity="0"></use>
                <g>
                    <use xlink:href="#b4hRkibCzL" opacity="1" fill-opacity="0" stroke="#7f7f7f" stroke-width="5" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#aJGvCq9Ld" opacity="1" fill="#000000" fill-opacity="0"></use>
                <g>
                    <use xlink:href="#aJGvCq9Ld" opacity="1" fill-opacity="0" stroke="#7f7f7f" stroke-width="5" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#a2BjBBZ1Jf" opacity="1" fill="#000000" fill-opacity="0"></use>
                <g>
                    <use xlink:href="#a2BjBBZ1Jf" opacity="1" fill-opacity="0" stroke="#7f7f7f" stroke-width="5" stroke-opacity="1"></use>
                </g>
            </g>
            <path></path>
            <path></path>
            <path></path>
            <path></path>
            <path></path>
            <path></path>
            <path></path>
            <path></path>
            <path></path>
            <path></path>
            <g>
                <use xlink:href="#c6gYkOZIbc" opacity="1" fill="#000000" fill-opacity="0"></use>
                <g>
                    <use xlink:href="#c6gYkOZIbc" opacity="1" fill-opacity="0" stroke="#ff0000" stroke-width="80" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#dnajv2alU" opacity="1" fill="#ff0000" fill-opacity="1"></use>
                <g>
                    <use xlink:href="#dnajv2alU" opacity="1" fill-opacity="0" stroke="#ff0000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#fdGDhcwxN" opacity="1" fill="#ff0000" fill-opacity="1"></use>
                <g>
                    <use xlink:href="#fdGDhcwxN" opacity="1" fill-opacity="0" stroke="#ff0000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#dNZoIoCMk" opacity="1" fill="#ff0000" fill-opacity="1"></use>
                <g>
                    <use xlink:href="#dNZoIoCMk" opacity="1" fill-opacity="0" stroke="#ff0000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#a5PN3oIKQ" opacity="1" fill="#ff0000" fill-opacity="1"></use>
                <g>
                    <use xlink:href="#a5PN3oIKQ" opacity="1" fill-opacity="0" stroke="#ff0000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#mmmdIctph" opacity="1" fill="#ff0000" fill-opacity="1"></use>
                <g>
                    <use xlink:href="#mmmdIctph" opacity="1" fill-opacity="0" stroke="#ff0000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#d5EhBzC2WL" opacity="1" fill="#ff0000" fill-opacity="1"></use>
                <g>
                    <use xlink:href="#d5EhBzC2WL" opacity="1" fill-opacity="0" stroke="#ff0000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#b4ZW7wUE7Y" opacity="1" fill="#ff0000" fill-opacity="1"></use>
                <g>
                    <use xlink:href="#b4ZW7wUE7Y" opacity="1" fill-opacity="0" stroke="#ff0000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#ev4URzEBW" opacity="1" fill="#ff0000" fill-opacity="1"></use>
                <g>
                    <use xlink:href="#ev4URzEBW" opacity="1" fill-opacity="0" stroke="#ff0000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
            <g>
                <use xlink:href="#elqPiiaJT" opacity="1" fill="#ff0000" fill-opacity="1"></use>
                <g>
                    <use xlink:href="#elqPiiaJT" opacity="1" fill-opacity="0" stroke="#ff0000" stroke-width="3" stroke-opacity="1"></use>
                </g>
            </g>
        </g>
    </g>
</svg>

这里是svg editor online和clip-path generator

链接：Examples，<clipPath> docs，Article，Tutorial，Inkscape tutorial

标签：svg，html，css，mask，css-shapes

Answer 2

您可以使用伪元素来实现这样的目标（可能）。

查看以下代码段：

html,body{margin:0;padding:0;}
div {
  height:300px;
  width: 100vw;
  position: relative;
  background: rgb(190,0,0);
}

div:before,div:after{
content:"";height:40px;
position:absolute;
top:calc(100% - 20px);
border-radius:50%;
background:rgb(255,0,0);

}
div:before{
width:60%;left:0;
}
div:after{
width:40%;left:60%;
}

<div></div>