svg separator with border

#html #css #svg #инспекция_кода #separator

Изучаю SVG.

В HTML-верстке, бывают порой такие секции, как у меня в примере, я решил сделать
несколько.

Мой код(лучше смотреть на всю страницу):

Первый вариант:


.blob {
  padding: 190px 0 270px;
  background-color: #1E2E8D;
  position: relative;
}

.blob .blob__text {
  font-size: 80px;
  color: #fff;
  text-align: center;
}

.blob .blob__separator-top {
  position: absolute;
  left: 0;
  top: 0;
}

.blob .blob__separator-bottom {
  position: absolute;
  left: 0;
  bottom: 0;
}

  
  
SVG Block
  





Второй вариант:



h2 {
  color: #fff;
  font-size: 80px;
  text-align: center;
}

.content-1 {
  position: relative;
  padding-top: 200px;
  background-color: #1E90FF;
}

.content-2 {
  padding: 200px;
  background-color: #1E2E8D;
}

.content-3 {
  padding-bottom: 200px;
  background-color: #90EE90;
}

.blob__separator-bottom {
  margin-bottom: -4px;
}

  
content-1
  

    
  



  
content-2



  

    
  
  
content-3





Написал руками. Здесь такая дуга, с цветными гранями(здесь именно важно что такие
цветные края есть), посередине контент. В общем-то у меня получилось то, что нужно.
Я делаю первые шаги в SVG, поэтому у меня есть вопросы:


Возможно подобные блоки можно реализовать иначе, более оптимально?
Возможно подобные блоки можно реализовать без SVG? при условии, что будет адаптивно
конечно.

    

Ответы

Ответ 1

Если тебя затрудняет работа с SVG ВРУЧНУЮ и ты не хочешь тратить все свое полезное
время на описание каждой точки фигуры - установи себе на компьютер Adobe Illustrator
(или подобные программы работающие с векторной графикой) и это упростит тебе задачу
с рисованием векторных фигур.

Я который месяц пишу сайт-проет и сам придумываю к нему дизайн. Для удобства я пользуюсь
Adobe программами.

Твоя лучшая работа сделанная в Adobe Illustrator (время работы над картинкой: 6-8 минут)



а вот в каких форматах можно сохранять файл:



ОБНОВЛЕНО: 24.11.17










Плюсы и минусы Adobe Illustrator:

Плюсы:


Удобный интерфейс
Возможность быстрого создания векторных фигур/картинок для разноплановых применений
(от создания обычной полоски для разделения на сайте до логотипов и векторных рисунков)
Быстро осваиваешь
Есть возможность сохранения в разных форматах
Помимо сохрания в определенном формате (допустим SVG), можно уточнить в опциях как
именно вы хотите сохранить и что добавить в ваш рисунок
Можно посмотреть код SVG!!!! 
Можно открыть файлы SVG других авторов работ и удалить/изменить/добавить объекты.
Когда я работал над тем, что мне нужна была карта Европы - скачав картинку формата
.svg с Wikipedia я удалил ненужные watermarks, пару стран Европы и Азии, закрасил их
другими цветами и получил нужную мне картинку.
Если есть файл pdf, то можно открыть его и разобрать фигуры в файле на детали (а
так же сохранить фигуры по отдельности). P.S. Это не работает, если pdf это скан или
сохранена как одна единая фигура.


Минусы:


Цена. Adobe программы продаются по подписке на продукт. Эти цены не многие могут потянуть
Как и в любых делах всему нужно учиться перед тем как применять. Потребуется посмотреть
несколько десятков роликов, чтобы понять как работает программа, но если начать сразу
работать над программой, знать что вы делаете и чего хотите добиться - у вас легко
получится нарисовать то, что задумывали. 
Код SVG может быть неудобен для редактирования/вставки на страницу И для добавления
внутри ее элементов другие объекты. Но я думаю, что применив смекалку, эту проблему
будет легко решить.


Немного о личном опыте. Когда мне впервые программа попала в руки, я сразу разобрался
что к чему, потому что у меня до этого был опыт в Adobe Photoshop и Paint.

(Если есть предложения по добавлению плюсов/минусов - не стесняйтесь редактировать)

ОБРАЗЕЦ СОХРАНЕНИЯ SVG:



Как мы можем видеть, файл можно настраивать на свой вкус и цвет



Код SVG, который вы можете увидееть/скопировать во время сохранения нажав на "Код SVG..."

еще один пример SVG: