CSS сплайн как фоновый объект - PullRequest
Новая
       86

CSS сплайн как фоновый объект

0 голосов
/ 14 июля 2020

Я изучал веб-разработку с помощью freecodecamp и просматривал шаблоны для назначения целевой страницы продукта. Я приземлился на странице shopify и задался вопросом, как я могу реализовать сплайн-подобный объект внизу синего фона.

Я попытался создать блок div с border-bottom-right-radius, преобразовать. Но они не были похожи на то, что реализовано в Shopify. Также просмотрел их файл css, но не смог понять, что они сделали.

Не могли бы вы помочь мне создать похожий? или укажите мне учебник, где я могу это изучить? 

.box {
    height: 500px;
    background-color: rgb(238, 217, 28);
    border-bottom-right-radius:50%;
    /* transform: translateX(-50%);
    transform: translateY(-50%); */
}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Shape</title>
</head>
<body>
    <div class='box'>
        Container
    </div>
</body>
</html>

введите описание изображения здесь

Ответы [ 2 ]

1 голос
/ 14 июля 2020

Это действительно фон SVG, как и заявил Джастинас. Здесь SVG встроен в CSS. (background-image: url('data:image/svg+xml;charset=utf8,..., за которым следует сам файл SVG, URL в кодировке , что означает, что вам нужно заменить %3E на > и %3C на < и, возможно, добавить несколько строк -breaks)

SVG вполне подходит для этого варианта использования, поскольку он отлично масштабируется (это его S) и предлагает красивые объекты для проектирования кривых, в частности path один, который используется здесь: 

<path fill="rgb(92, 106, 196)" d="M1440 488c-19.3 4.3-39.2 8.6-60 13-174.2 36.5-228.8 288-467 76.2-153.6-136.6-424-22.8-660.4-5.8-130.2 9.3-252.6-75-252.6-75V0h1440"/>

Хотя большинство людей будут полагаться на инструменты векторного рисования для создания таких фигур (Inkscape, Indesign, Figma и т. д. c.), это возможно " вручную ", как только вы поймете синтаксис атрибута d. Вам просто понадобится немного практики;)

0 голосов
/ 14 июля 2020 

.free-trial--default .free-trial__header {
    background-image: url(data:image/svg+xml;charset=utf8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221440%22%20height=%22661.1%22%20viewBox=%220%200%201440%20661.1%22%3E%3Cstyle%20type=%22text/css%22%3Ecircle,%20ellipse,%20line,%20path,%20polygon,%20polyline,%20rect,%20text%20%7B%20fill:%20rgb(92,%20106,%20196)%20!important;%20%7D%3C/style%3E%3Cpath%20fill=%22rgb(92,%20106,%20196)%22%20d=%22M1440%20488c-19.3%204.3-39.2%208.6-60%2013-174.2%2036.5-228.8%20288-467%2076.2-153.6-136.6-424-22.8-660.4-5.8-130.2%209.3-252.6-75-252.6-75V0h1440%22/%3E%3C/svg%3E);
}

У них есть эта картинка. Вот имя класса, в котором находится это изображение - «section section - padding-top-only free-trial__header».

...