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

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

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

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

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

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

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

Буду признателен за совет. Спасибо.


svg image css css-shapes
person luqo33    schedule 26.03.2016    source источник
comment
Связанный ответ - stackoverflow.com/questions/25895895/. Вы можете сделать это, используя radial-gradient, как в этом ответе, но порядок цветов следует изменить.   -  person Harry    schedule 26.03.2016
comment
Здесь представлена ​​демонстрация, использующая тот же подход, что и в ответе, приведенном выше для справки :) будут разных цветов, часть необходимо обработать вручную, изменив цвета градиента. Я не думаю, что для этого есть способ (даже если вы используете SVG, цвета должны обрабатываться, если вы не выберете подход, основанный на clip-path, который не будет поддерживаться в IE).   -  person Harry    schedule 26.03.2016
comment
Примечание для потенциальных близких избирателей. Связанная мною цепочка - это просто связанный элемент, который может дать пользователю некоторые идеи. Этот вопрос не повторяется, поскольку в этом вопросе указано несколько дополнительных условий.   -  person Harry    schedule 26.03.2016
comment
Привет, Гарри, большое спасибо - твой вклад очень полезен. По-прежнему остаются без внимания некоторые предостережения (особенно в отношении перекрытия цветов), но ваше предложение приблизило меня к ожидаемому результату. Я предполагаю, что наиболее простым решением было бы сделать границы частью фоновых изображений для целых div или пойти на компромисс и отказаться от идеи чередования / перекрытия цветов на границе.   -  person luqo33    schedule 26.03.2016
comment
Пожалуйста. Да, эта ветка не полностью отвечает на этот вопрос (я понял это только после ссылки, но оставил ссылку для справки). Мне кажется, что решение, охватывающее все вопросы, невозможно, но тогда кому-то может прийти в голову умная идея сделать это. Я не уверен, о какой части вы имели в виду, перекрывая цвета. Если это серая и белая часть, то это можно сделать с помощью этого подхода.   -  person Harry    schedule 26.03.2016

Ответы (1)


arrow_upward
9
arrow_downward

Использование 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>

person Harry    schedule 27.03.2016
comment
Привет, вау, это какое-то серьезное волшебство css :) Хотя я, наконец, остановился на гораздо более прямом подходе к использованию изображений для моего фона, этот ответ определенно стоит одобрения и предоставит решение аналогичных проблем в много случаев. Спасибо, Гарри! - person luqo33; 31.03.2016
comment
Пожалуйста, @ luqo33. Рад помочь :) (PS: не возражаете, если я добавлю к вопросу тег SVG, потому что, как вы говорите, этот подход может быть полезен и другим, а добавление тега упростит поиск). - person Harry; 31.03.2016