Создание нерегулярной границы с перекрывающимися цветами CSS

Question

Как вы собираетесь создавать нерегулярную границу с переменными цветами, как на снимке экрана?

Я считал создание границы изображения в графическом редакторе, а затем с помощью border-image свойства, как описано в docs.

Однако эта техника не позволила бы мне добиться эффекта нескольких цветов фона (серого и белого на снимке экрана), входящих в границы «волн».

Другим решением было бы просто создать весь белый и серый цвет в слове Photoshop, а просто использовать его на веб-сайте. Я действительно хотел избежать этого по соображениям производительности и предпочел бы просто создать серый, проверенный фрагмент шаблона и повторить его.

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

Буду признателен за советы. Благодарю.

Answer 1

Использование SVG:

Вы можете сделать это с помощью SVG. Я бы сказал, что это довольно сложно, потому что подход использует шаблоны для повторяющихся окружностей, маску с рисунком в качестве заливки для создания прозрачных разрезов. Затем эта маска применяется к изображению для получения полного эффекта. Это, на мой взгляд, ближе всего к тому, что вы хотите, а также имеет хорошую поддержку браузера. Он отлично работает в IE10 +, Edge, Firefox, Chrome, Opera и Safari.

Следует обратить внимание на несколько моментов - (1) Вам нужно как-то получить работу с карусели с помощью SVG image, потому что в противном случае маска не будет иметь эффекта (2) радиус окружности изменится как ширина контейнера (или) назначить ширину контейнера атрибуту viewBox с использованием JS (или найти некоторые настройки, чтобы предотвратить изменение радиуса, я не знаю никого).

.masked { 
 
    position: relative; 
 
    height: 175px; 
 
    width: 100%; 
 
    background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%); 
 
    background-size: 51% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 0%, 100% 0%; 
 
    padding-top: 100px; 
 
} 
 
.masked svg { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 
path { 
 
    fill: #fff; 
 
} 
 
image { 
 
    mask: url("#mask"); 
 
}

<div class='masked'> 
 
    <svg viewBox='0 0 1200 100' preserveAspectRatio='none'> 
 
    <defs> 
 
     <pattern id="circles" patternUnits="userSpaceOnUse" width="10" height="100"> 
 
     <path d="M0,0 L10,0 10,95 A5,5 0 0,0 0,95 L0,0" /> 
 
     </pattern> 
 
     <mask id="mask"> 
 
     <rect height="100%" width="100%" fill="url(#circles)" /> 
 
     </mask> 
 
    </defs> 
 
    <image xlink:href='http://lorempixel.com/1200/100/nature/1' x="0" y="0" height="100%" width="100%" /> 
 
    </svg> 
 
    Lorem Ipsum Dolor Sit Amet... 
 
</div>

Использование CSS:

Это может быть сделано с помощью CSS масок, но, к сожалению, поддержка браузера для этой функции страшно. В настоящее время поддерживается только в браузерах с включенным WebKit. Если другие браузеры не поддерживаются, это замечательный вариант. Все, что нам нужно сделать, это создать радиальный градиент (повторяющийся по оси X) для маски, как в приведенном ниже фрагменте, дать ему необходимый размер и поместить его соответствующим образом.

.masked { 
 
    position: relative; 
 
    height: 175px; 
 
    width: 100%; 
 
    background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%); 
 
    background-size: 51% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 0%, 100% 0%; 
 
    padding-top: 80px; 
 
} 
 
.masked:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0px; 
 
    height: 80px; 
 
    width: 100%; 
 
    background: url(http://lorempixel.com/1000/100/nature/1); 
 
    -webkit-mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at 50% 100%, transparent 50%, black 55%); 
 
    -webkit-mask-size: 100% calc(100% - 12px), 12px 12px; 
 
    -webkit-mask-position: 0% 0%, 0px 68px; 
 
    -webkit-mask-repeat: repeat-x; 
 
}

<div class="masked">Lorem Ipsum Dolor Sit Amet</div>