6

Я пытаюсь создать разделитель фона на основе путей SVG. Он работает, следующим образом:

<section id="section1">
</section>
<svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
  <path d="M0 0 L50 100 L100 0 Z" />
</svg>
<section id="section2">
</section>

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

Все идет нормально. Но теперь, я хочу, добавить фон к section1, в том числе применить SVG , в примере:

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

Вот всё, что я сделал (действительно плохие результаты):

Добавил:

background: url(img) к элементу

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

и добавил background к section1

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

Перевод вопроса: SVG triangle separator with image background @Jorge Anzola

1

5 ответов 5

7

Вот подход, использующий тот же код, что и в вашем примере, но путь svg изменен на инвертированный треугольник, который абсолютно позиционирован в нижней части section:

#section1{
  position:relative;
  background:url('http://i.imgur.com/k8BtMvj.jpg');
  background-size:cover;
  height:200px;
}
svg{
  position:absolute;
  bottom:-10px; left:0;
  width:100%; height:100px;
  display:block;
}
<section id="section1">
  <svg width="100%" height="100" viewBox="0 0 100 102" preserveAspectRatio="none">
    <path d="M0 0 L50 90 L100 0 V100 H0" fill="#2A80B9" />
  </svg>
</section>

Перевод ответа: SVG triangle separator with image background @web-tiki

4

Еще как вариант

.element {
  position: relative;
  width: 100%;
  height: 200px;
  background-image: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}

.element:before,
.element:after {
  content: '';
  position: absolute; bottom: 0;
  width: 0;
  height: 0;
  border-style: solid;
}

.element:before {  
  left: 0;
  border-width: 100px 0 0 55vw;
  border-color: transparent transparent transparent #007bff;
}

.element:after {  
  right: 0;
  border-width: 0 0 100px 55vw;
  border-color: transparent transparent #007bff transparent;
}
<div class="element"></div>

3
  • soledar10! И даже на несколько строчек короче, чем у Юрия А если - вариант - " Например применить другую форму svg path, сделать область перекрытия полупрозрачной, анимировать её при наведение и т.д " 18 мар 2017 в 17:15
  • @Yuri ну пусть будет на одну :-) 18 мар 2017 в 17:20
  • @Alexandr_T, незадача, не на одну :)
    – Yuri
    18 мар 2017 в 17:23
4

Вариант с использованием before и after:

.element {
  position: relative;
  width: 100%;
  height: 200px;
  background-image: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
  overflow: hidden;
}

.element:before, .element:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #2A80B9;
}

.element:before {
    left: -50px;
    bottom: -86%;
    transform: rotate(16deg);
}

.element:after {
    right: -50px;
    bottom: -86%;
    transform: rotate(-16deg);
}
<div class="element"></div>

3

Вариант с использованием градиента:

.element {
  display: block;
  position: relative;
  width: 100%;
  height: 200px;
  background: linear-gradient(-164deg, transparent 72%, #2A80B9 72%, #2A80B9 100%), linear-gradient(164deg, transparent 72%, #2A80B9 72%, #2A80B9 100%), url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: auto, auto, cover;
  overflow: hidden;
}
<div class="element"></div>

3
  • Замечательно. Оба варианта Yuri решают вопрос автора с enSO Хотелось бы еще вариантов для расширения базы знаний ruSO, что нибудь интересное, необязательно точь в точь, по форме, как я писал в первом комментарии к вопросу enSO. 18 мар 2017 в 16:09
  • У меня градиент отображается с рваными краями. (Хром, Мак ОС)
    – YozhEzhi
    24 мар 2017 в 11:51
  • @YozhEzhi, и что? Добавь немного переливания на граница и края будут нормальные
    – Yuri
    24 мар 2017 в 14:52
2

Вариант с использованием clip-path

Поддержка браузерами - http://caniuse.com/#search=clip-path

.element {
  position: relative;
  width: 100%;
  height: 200px;
  background-image: url(http://i.imgur.com/k8BtMvj.jpg);
  background-size: cover;
}
.element:before{
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%;;
  height: 100px;
  background: #2980B9;
  -webkit-clip-path: polygon(50% 75%, 100% 0, 100% 100%, 0 100%, 0 0);
  clip-path: polygon(50% 75%, 100% 0, 100% 100%, 0 100%, 0 0);
  -webkit-clip-path: url("#clippath");
  clip-path: url("#clippath");
}
<div class="element"></div>
<svg width='0' height='0'>
  <defs>
    <clipPath id="clippath" clipPathUnits="objectBoundingBox">    
      <polygon points="0.5 0.75, 1 0, 1 1, 0 100, 0 0" />
    </clipPath>
  </defs>
</svg>

7
  • Использование вариантов: clip-path, mask хоть в CSS или SVG напрашиваются само собой. Но это просто обрезка изображения. А как быть, если нужно сделать область полупрозрачной или эти треугольники анимировать. Я думаю у автора именно такие были мысли. Ведь это не оформление бордюров изображения, а какая-то веб страничка. В любом случае, soledar10 спасибо! 19 мар 2017 в 11:01
  • Изображение не резалось, снизу добавляем с помощью псевдоэлемента блок и его непосредственно преобразуем с помощью clip-path
    – soledar10
    19 мар 2017 в 11:05
  • Пример с градиентом - jsfiddle.net/soledar10/34yt7fk6
    – soledar10
    19 мар 2017 в 11:06
  • Нормально пример с градиентами в Chrome и FF работает. Но clip-path не хочет работать в FF, не смотря на обещания caniuse. Может префиксы на FF надо? 19 мар 2017 в 11:25
  • Посмотрел внимательней caniuse - Partial support refers to only supporting the url() syntax. 19 мар 2017 в 11:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.