Как сверстать эту секцию?

Question

[Лев Александров]

1. Как сделать секцию в виде облака? Экспортировал svg и попробовал использовать clip-path, но не получается:

При масштабировании видно, что фигура прижата к верхнему левому углу и размер не подстраивается под размера diva:


UPDATE:
Попробовал использовать свойство mask-image, т. к. там есть свойства типа mask-position и вот, что получил:

Почти тоже самое будет, если использовать background-image, но с bgi контент может за облако вылезти.

2. Видео тоже через clip-path надо делать?

3. Как сделать такую кнопку?

У меня задан только ее контур:

<svg width="274" height="83" viewBox="0 0 274 83" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g opacity="0.5" clip-path="url(#clip0)">
        <path fill="red" d="M137.86 7.69921C167.153 13.0655 196.378 18.6212 225.566 24.2232C232.818 25.6489 240.32 26.9292 247.294 29.2704C254.274 31.6509 260.203 35.0465 264.498 39.1238C268.876 43.1873 271.437 47.8166 271.919 52.5376C272.035 53.7658 271.835 54.9868 271.327 56.1577C270.764 57.3441 269.802 58.437 268.498 59.3716C265.944 61.1056 262.837 62.5142 259.342 63.5227C256.036 64.5975 252.571 65.4996 248.982 66.2195C245.411 66.9191 241.766 67.4946 238.063 67.9433C230.689 68.8533 223.197 69.3646 215.753 69.837C208.31 70.3094 200.855 70.7675 193.544 71.5706C186.233 72.3737 179.212 73.7913 171.849 74.6951C168.171 75.1578 164.414 75.4227 160.622 75.4866C156.828 75.5572 153.031 75.4623 149.259 75.348L126.607 74.5098C111.501 73.9139 96.4091 73.4773 81.3008 72.9158C66.1924 72.3543 50.8931 71.4797 36.0654 68.6321C28.6848 67.2341 21.3303 65.3346 14.9657 62.3502C8.40007 59.3784 3.7288 55.134 1.82245 50.408C0.997257 48.0061 1.12536 45.5526 2.19619 43.2496C2.71976 42.1208 3.42081 41.0296 4.29025 39.9904C5.18735 38.9614 6.21681 37.9789 7.36985 37.0513C9.6996 35.2282 12.4373 33.6109 15.5124 32.2411C18.5536 30.8937 21.7866 29.7033 25.1794 28.6816C31.8756 26.6409 38.7882 25.0867 45.3745 23.1643C51.9608 21.2418 58.5967 19.253 65.5064 17.5334C72.4409 15.805 79.6781 14.4963 87.1151 13.6261C94.5004 12.7549 101.996 12.1661 109.557 11.8632C117.074 11.5186 124.617 11.3613 132.171 11.1978C139.725 11.0342 147.161 10.9402 154.786 10.9595C169.907 11.0601 185.256 11.8615 200.114 14.3525C207.546 15.581 214.774 17.2914 221.667 19.4525C225.104 20.5334 228.431 21.7449 231.627 23.0793C234.825 24.4233 237.878 25.8923 240.764 27.4759C240.793 27.4986 240.808 27.5263 240.806 27.5539C240.805 27.5816 240.787 27.6075 240.756 27.6271C240.722 27.6427 240.678 27.6501 240.634 27.6478C240.59 27.6454 240.547 27.6336 240.515 27.6145C234.643 24.5952 228.161 22.0438 221.245 20.0298C217.805 19.0176 214.278 18.1273 210.682 17.3635C207.1 16.5827 203.463 15.9122 199.785 15.3548C185.078 13.0646 169.98 12.5243 155.002 12.562C147.501 12.5906 140.015 12.7715 132.504 12.9924C124.992 13.2133 117.434 13.4456 110.007 13.8224C102.602 14.1853 95.2612 14.8048 88.0218 15.678C80.8102 16.5559 73.7974 17.8577 67.0823 19.5652C60.3456 21.28 53.7909 23.2593 47.0904 25.162C40.39 27.0647 33.4274 28.692 26.9334 30.6124C20.4394 32.5328 14.4028 34.9593 10.1373 38.3256C9.09372 39.162 8.16169 40.0483 7.34922 40.9768C6.55132 41.9003 5.90651 42.8723 5.42354 43.8797C4.46682 45.8842 4.33145 48.0233 5.02856 50.1208C6.45628 54.3285 11.0589 58.1853 16.778 60.9569C22.4971 63.7285 29.6078 65.6635 36.7798 67.085C51.1806 69.9448 66.2832 71.0571 81.3363 71.7948L103.966 72.8179C111.513 73.166 119.061 73.4889 126.611 73.7866L149.257 74.7141C156.757 75.1189 164.254 74.8746 171.518 73.9889C178.755 73.0579 185.802 71.5866 193.173 70.7315C200.545 69.8764 207.984 69.266 215.399 68.6887C222.813 68.1114 230.218 67.513 237.4 66.5309C241.009 66.0449 244.559 65.4392 248.036 64.7165C251.446 63.9716 254.74 63.0658 257.889 62.0071C261.05 61.0757 263.854 59.7822 266.152 58.1951C267.202 57.4252 267.973 56.5288 268.421 55.5582C268.834 54.5661 268.989 53.5336 268.88 52.4961C268.356 48.1036 265.984 43.8009 261.987 39.9918C257.991 36.1827 252.5 32.9922 246.032 30.72C239.513 28.4853 232.185 27.1727 224.912 25.7046C195.829 19.8601 166.772 13.9618 137.805 7.88229C137.76 7.87193 137.723 7.85196 137.701 7.82647C137.679 7.80098 137.673 7.7719 137.685 7.74517C137.703 7.72815 137.729 7.71481 137.76 7.70668C137.791 7.69855 137.826 7.69596 137.86 7.69921Z" />
        <path fill="blue" d="M135.311 7.5662C164.088 12.8712 192.775 18.3575 221.436 23.8975C228.551 25.3092 235.927 26.576 242.764 28.91C249.586 31.2961 255.374 34.656 259.58 38.6708C263.786 42.6856 266.27 47.2221 266.795 51.85C266.917 53.0566 266.733 54.257 266.252 55.4106C265.721 56.5856 264.795 57.6711 263.528 58.6025C261.05 60.3169 258.017 61.7093 254.593 62.7031C248.093 64.793 241.064 66.2827 233.73 67.1247C226.493 68.035 219.14 68.5466 211.812 69.0113C204.484 69.476 197.188 69.9769 190.004 70.766C182.821 71.5551 175.938 72.9661 168.714 73.8702C165.102 74.3355 161.41 74.6038 157.682 74.6719C153.957 74.7461 150.229 74.6548 146.514 74.5435L124.299 73.7281C109.469 73.1466 94.641 72.7238 79.7969 72.1761C64.9528 71.6284 49.918 70.7607 35.3542 67.9338C28.1111 66.5499 20.883 64.657 14.667 61.6941C8.23029 58.7436 3.6683 54.5501 1.82754 49.8918C1.02937 47.5311 1.15516 45.1218 2.19483 42.857C3.2269 40.6206 4.92751 38.5353 7.21662 36.699C9.47764 34.8925 12.1495 33.2898 15.161 31.9336C18.1188 30.6112 21.2619 29.4393 24.5602 28.4289C31.1289 26.4022 37.9144 24.8552 44.3611 22.9599C50.8077 21.0646 57.3283 19.0767 64.0991 17.3705C67.4851 16.5071 70.9691 15.7522 74.5058 15.0895C78.0426 14.4269 81.653 13.899 85.2939 13.4484C92.5637 12.5821 99.9435 11.9965 107.389 11.695C114.78 11.3507 122.184 11.1931 129.577 11.028C136.971 10.8629 144.384 10.7471 151.823 10.8118C166.68 10.8986 181.73 11.6844 196.37 14.1571C203.669 15.3685 210.765 17.0607 217.523 19.2018C220.895 20.2694 224.157 21.4661 227.289 22.784C230.401 24.1132 233.366 25.5663 236.163 27.1325C236.18 27.1424 236.193 27.1543 236.202 27.1672C236.211 27.1801 236.215 27.1938 236.214 27.2075C236.213 27.2211 236.208 27.2344 236.198 27.2463C236.188 27.2583 236.173 27.2687 236.156 27.2768C236.123 27.294 236.079 27.3023 236.034 27.2999C235.988 27.2976 235.946 27.2848 235.914 27.2642C230.167 24.2855 223.815 21.7664 217.032 19.7755C213.683 18.7705 210.248 17.8826 206.745 17.1167C203.226 16.3478 199.654 15.6854 196.043 15.132C181.553 12.8737 166.673 12.3448 151.971 12.3901C144.596 12.4252 137.237 12.6059 129.875 12.8346C122.513 13.0633 115.14 13.2845 107.848 13.7098C100.572 14.0711 93.3583 14.6835 86.2443 15.544C82.7639 16.0098 79.2792 16.558 75.7906 17.1818C72.3019 17.8057 69.0244 18.5783 65.7321 19.4121C59.1343 21.1136 52.7175 23.1 46.2037 24.9574C39.6899 26.8147 32.7374 28.4701 26.336 30.3816C19.9346 32.293 14.1307 34.6766 9.99377 38.0082C7.90811 39.6377 6.34796 41.4951 5.38735 43.4921C4.4591 45.4631 4.3297 47.5636 5.0096 49.6239C6.65257 53.818 10.7127 57.6046 16.4563 60.2996C22.1403 63.0831 28.9885 64.97 35.9771 66.375C50.1158 69.1798 64.952 70.3195 79.7293 71.0428L101.98 72.0461C109.397 72.392 116.811 72.7102 124.222 73.0007L146.467 73.9072C153.856 74.3046 161.242 74.0568 168.393 73.1715C175.481 72.2327 182.4 70.7823 189.645 69.9274C196.89 69.0726 204.19 68.4756 211.467 67.898C218.743 67.3204 226.044 66.7234 233.089 65.7135C234.863 65.4962 236.572 65.2065 238.327 64.8986C240.083 64.5907 241.748 64.2437 243.437 63.8979C246.779 63.1741 250.003 62.2874 253.08 61.2464C256.171 60.3221 258.902 59.0379 261.122 57.4642C262.13 56.7049 262.869 55.8261 263.297 54.8774C263.69 53.899 263.836 52.8829 263.73 51.8622C263.223 47.5534 260.92 43.33 257.033 39.5815C253.177 35.807 247.809 32.643 241.453 30.3984C235.084 28.1714 227.882 26.8792 220.734 25.4314C192.236 19.645 163.659 13.8132 135.253 7.79737C135.208 7.78701 135.171 7.76704 135.149 7.74155C135.127 7.71606 135.121 7.68698 135.133 7.66025C135.137 7.63359 135.158 7.60931 135.19 7.59198C135.223 7.57466 135.266 7.56549 135.311 7.5662V7.5662Z" />
    </g>
    <defs>
        <clipPath id="clip0">
            <rect width="270.635" height="68.1663" fill="black" transform="translate(3.69141 0.694336) rotate(2.98874)"/>
        </clipPath>
    </defs>
</svg>

Comments

[Антон Литвиненко]

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

[Лев Александров]

Антон Литвиненко, ахахах, ну что поделать, надо учиться и делать, что дают

[Максим]

Лев Александров, там clipPath сам по себе не нужен - можете удалить его и ни чего не изменится , там clipPath сделан внутри самого path обрезкой ... в этом случае надо просто переделать эту кнопку ..

Просто перерисовать в векторном редакторе ... или я щас попробую сделать без перерисовки

[Ankhena]

1. Зеленый фон - прямо SVG на фоне.
2. Видео - уточнить у заказчика. Потому что, вероятно, само видео будет открываться в модалке.
3. Ну отлично, что вам еще нужно для фона кнопки?
Возможно, пригодится preserveAspectRatio

[Лев Александров]

Ankhena,
1. Да, я попробовал так (написал в вопросе UPDATE) и с mask-image попробовал. Но дело в том, что дальше в макете идут еще и модалки в виде облака. Я думал, может есть универсальное решение для всего этого.
2. Да, верно, там модалка, но ничем не отличается от того, что в секции (тоже облако).

3. Я попробовал использовать этот контур, внутрь svg вставил тег a и текст (находил такие решения в гугле), но эффект наведения происходит только когда я навожу на сам контур и на текст, а во внутренней области не происходит hover.

[Ankhena]

Лев Александров,

Но дело в том, что дальше в макете идут еще и модалки в виде облака. Я думал, может есть универсальное решение для всего этого.

Знаете, если рассказать ВСЮ проблему, а не её куски, то всем будет легче :)
Но универсальное решение не значит хорошее решение. Всё же лучше исходить из конкретной задачи.

Собственно, в модалке это тоже может быть обычный фон.

Для видео да, придется делать clip-path.
Хотя я не уверена, что это удобно смотреть.

3. Я попробовал использовать этот контур, внутрь вставил тег a и текст и эффект наведения происходит только когда я навожу на сам контур и на текст, а во внутренней области не происходит hover.

Я плохо понимаю, как может быть наведение на ФОН.
Но делайте песочницу на jsfiddle.net, посмотрю, как вы его сделали.

[Максим]

Лев Александров, вот так с кнопкой - возможно надо доработать - кликабельно

[Лев Александров]

Ankhena, извиняюсь, накосячил.
Окей, сделаю фоном.
Но с ним тоже проблемы: если мало контента или много, то картинка непропорциональная становится. min-height, наверное, поставлю.

Вот примерно так: https://jsfiddle.net/y12w9dbe/
Область внутри контура не является ссылкой, только сам контур и текст.
UPD: Brasileiro помог с кнопкой

[Лев Александров]

Brasileiro, круто, вы столько всего там внесли нового, я бы не допер до этого. Спасибо!

[Лев Александров]

Ankhena, Brasileiro, отпишитесь ниже, я отмечу, что вы дали решение.

[Ankhena]

Лев Александров,

UPD: Brasileiro помог с кнопкой

Ага, мастер SVG :)

Но с ним тоже проблемы: если мало контента или много, то картинка непропорциональная становится. min-height, наверное, поставлю.

Да, я понимаю.
И такие вопросы хорошо бы задавать дизайнеру, как он думает, это должно выглядеть, если текст будет другой.
Но, возможно, текст будет только таким, а если другой, то снова обратятся к дизайнеру. Все развлекаются как могут.

[Лев Александров]

Ankhena, почему вы не отписались? Вы же тоже помогли.

[Ankhena]

Лев Александров, вот и хорошо :)

Answer 1

[Максим]

вот так с кнопкой - возможно надо доработать - кликабельно

Comments

[Лев Александров]

Благодарю)