Попытка воссоздать особенность / форму - PullRequest
Новая
       19

Попытка воссоздать особенность / форму

0 голосов
/ 18 апреля 2019

Я нашел изображение этого сайта здесь: enter image description here

И мне было интересно, как появилась нижняя волнистая часть между фиолетовым и белым участками.

Моей первой мыслью было использовать clip-path, но я не слишком знаком с этим.Моя вторая мысль состояла в том, чтобы использовать некоторые формы, чтобы попытаться воссоздать это, но кажется, что это не самый лучший способ решить эту проблему.

Есть идеи или мысли?

Ответы [ 2 ]

0 голосов
/ 14 мая 2019

Вы можете использовать псевдоэлементы для достижения чего-то подобного (возможно).

Проверьте приведенный ниже фрагмент: 

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>
0 голосов
/ 18 апреля 2019

Используйте SVG (масштабируемую векторную графику) в качестве пути клипа. Если вы создаете SVG и масштабируете его, вы можете использовать его для обрезки фона с помощью формы SVG. Чтобы получить этот конкретный дизайн, вы можете использовать Inkscape (лучший бесплатный редактор SVG) или Illustrator (если вы можете себе это позволить) для разработки формы.

Вот пример из кодекса: 

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

EDIT:

Я не собираюсь писать код для вас, это не то, для чего переполнение стека, но я дам вам 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 редактор онлайн и генератор пути клипа

Ссылки: Примеры , <clipPath> документы , Статья , Учебник , Учебник Inkscape

...