Разделитель с шестиугольниками
Оба этих сепаратора имеют цветные и прозрачные шестиугольники и по своей сути одинаковые, но в первой секции они синии, а во второй - белые.
Для удобства SVG-спрайты внесены в CSS код. Если нужно подключить их другим образом - скачайте исходник.
Размер и соотв. высота шестиугольников регулируется свойством background-size по коориднате Y.
|
1 2 3 4 5 6 7 8 9 |
<section class="section section-white"> Светлая секция с темным нижним разделителем </section> <section class="section section-color"> Темная секция со светлым нижним разделителем </section> <section class="section section-no"> Светлая секция без разделителя </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white { background-color: #FFF; background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 675 134' style='enable-background:new 0 0 675 134;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .s%7Bfill:%23337AB7;%7D %3C/style%3E %3Cg%3E %3Cg%3E %3Cpolygon class='s' points='63.3,54.7 63.3,42.5 52.8,36.4 42.2,42.5 42.2,54.7 52.8,60.8 '/%3E %3Cpolygon class='s' points='31.7,36.3 31.7,24.1 21.1,18 10.6,24.1 10.6,36.3 21.1,42.4 '/%3E %3Cpolygon class='s' points='84.4,18.3 84.4,6.1 73.9,0 63.3,6.1 63.3,18.3 73.9,24.4 '/%3E %3Cpolygon class='s' points='147.7,18.3 147.7,6.1 137.1,0 126.6,6.1 126.6,18.3 137.1,24.4 '/%3E %3Cpolygon class='s' points='232.1,18.3 232.1,6.1 221.5,0 211,6.1 211,18.3 221.5,24.4 '/%3E %3Cpolygon class='s' points='284.8,36.3 284.8,24.1 274.2,18 263.7,24.1 263.7,36.3 274.2,42.4 '/%3E %3Cpolygon class='s' points='379.7,18.3 379.7,6.1 369.2,0 358.6,6.1 358.6,18.3 369.2,24.4 '/%3E %3Cpolygon class='s' points='506.3,18.3 506.3,6.1 495.7,0 485.2,6.1 485.2,18.3 495.7,24.4 '/%3E %3Cpolygon class='s' points='675,18.3 675,6.1 664.5,0 653.9,6.1 653.9,18.3 664.5,24.4 '/%3E %3Cpolygon class='s' points='643.4,36.3 643.4,24.1 632.8,18 622.3,24.1 622.3,36.3 632.8,42.4 '/%3E %3Cpolygon class='s' points='559,36.3 559,24.1 548.4,18 537.9,24.1 537.9,36.3 548.4,42.4 '/%3E %3Cpolygon class='s' points='147.7,54.7 158.2,60.8 168.8,54.7 168.8,42.5 158.2,36.4 147.7,42.5 '/%3E %3Cpolygon class='s' points='232.1,54.7 232.1,42.5 221.5,36.4 211,42.5 211,54.7 221.5,60.8 '/%3E %3Cpolygon class='s' points='316.4,54.7 316.4,42.5 305.9,36.4 295.3,42.5 295.3,54.6 284.8,60.6 284.8,72.8 295.3,78.9 305.9,72.8 305.9,60.8 '/%3E %3Cpolygon class='s' points='358.6,54.7 358.6,42.5 348.1,36.4 337.5,42.5 337.5,54.7 348.1,60.8 '/%3E %3Cpolygon class='s' points='411.3,36.4 400.8,42.5 400.8,54.7 411.3,60.8 421.9,54.7 421.9,42.5 421.9,42.4 432.4,36.3 432.4,24.1 421.9,18 411.3,24.1 411.3,36.3 '/%3E %3Cpolygon class='s' points='506.3,54.7 516.8,60.8 527.4,54.7 527.4,42.5 516.8,36.4 506.3,42.5 '/%3E %3Cpolygon class='s' points='675,54.7 675,42.5 664.5,36.4 653.9,42.5 653.9,54.7 664.5,60.8 '/%3E %3Cpath class='s' d='M664.5,133.7l-10.5-6.1v-12.2l10.5-6.1V97.2l10.5-6.1V78.8l-10.5-6.1L654,78.8V91l0,0l-10.5,6.1v12.2l0,0 l-10.5,6.1l0,0l-10.5-6.1l0,0V97.1L611.7,91V78.8l-10.5-6.1l0,0v-12l10.5-6.1V42.4l-10.5-6.1l-10.5,6.1v12.1l-10.5,6.1v12.2l0,0 l-10.5,6.1V91l10.5,6.1l10.5-6.1l10.5,6.1v12.2l0,0l-10.5,6.1v12.2l0,0l-10.5,6.1l0,0l-10.5-6.1v-12.2l-10.5-6.1V97.2l-10.5-6.1 l-10.5,6.1l0,0l-10.5-6.1l0,0V78.9l-10.5-6.1l-10.5,6.1v12.2l0,0l-10.5,6.1v12.2l0,0l-10.5,6.1l0,0l-10.5-6.1l-10.5,6.1v12.2l0,0 l-10.5,6.1l0,0l-10.5-6.1l0,0v-12.2l10.6-6.1V97.2L443,91.1l-10.5,6.1l0,0L422,91.1l0,0V78.9l-10.5-6.1L401,78.9v12.2l10.5,6.1 l0,0v12.2l0,0l-10.5,6.1v12.2l-10.5,6.1l0,0l-10.5-6.1l0,0v-12.2l0,0l10.5-6.1V97.2L380,91.1V78.9l0,0l10.5-6.1V60.6L380,54.5 l-10.5,6.1v12.2l0,0L359,78.9v12.2l10.5,6.1l0,0v12.2l0,0l-10.5,6.1l0,0l-10.5-6.1l0,0V97.2L338,91.1V78.9l-11-6.1l-10.5,6.1v12.2 l10.5,6.1l0,0v12.2l-10.5,6.1v12.2l-10.5,6.1l0,0l-10.5-6.1l0,0v-12.2l10.5-6.1V97.2l-10.5-6.1L285,97.2v12.2l0,0l-10.5,6.1l0,0 l-10.5-6.1l-10.5,6.1l0,0l-10.5-6.1l0,0V97.2l-10.5-6.1l0,0V78.9L222,72.8l-11,6.1v12.2l-10.5,6.1v12.2l10.5,6.1l0,0v12.2 l-10.5,6.1l0,0l-10.5-6.1v-12.2l-10.5-6.1l0,0V97.2L169,91.1V78.9l-10.5-6.1L148,78.9v12.2l10.5,6.1v12.2l0,0l-10.5,6.1v12.2l0,0 l-10.5,6.1l0,0l-10.5-6.1v-12l10.5-6.1V97.4L127,91.3l-11,6.1l0,0l-10.5-6.1V79.1L94.9,73l-10.5,6.1v12.2l10.5,6.1v12.2l10.5,6.1 v12l0,0l-10.5,6.1l0,0l-10.5-6.1v-12.2l-10.5-6.1l-10.5,6.1l0,0l-10.5-6.1v-12l10.5-6.1V79.1L52.8,73l-10.5,6.1v12.2l-10.5,6.1v12 l-10.5,6.1v12.2l0,0l-10.5,6.1l0,0L0,127.6v6.4h675v-6.4L664.5,133.7z M527.4,127.6l-10.5,6.1l-10.5-6.1v-12.2l10.5-6.1l10.5,6.1 V127.6z'/%3E %3Cpolygon class='s' points='10.6,60.6 10.6,72.8 21.1,78.9 31.7,72.8 31.7,60.6 21.1,54.6 '/%3E %3Cpolygon class='s' points='116,72.8 126.6,78.9 137.1,72.8 137.1,60.6 126.6,54.6 126.6,42.5 116,36.4 105.5,42.5 105.5,54.7 116,60.8 '/%3E %3Cpolygon class='s' points='200.4,72.8 200.4,60.6 189.9,54.6 179.3,60.6 179.3,72.8 189.9,78.9 '/%3E %3Cpolygon class='s' points='253.1,78.9 253.1,91.1 263.7,97.2 274.2,91.1 274.2,78.9 263.7,72.8 263.7,72.8 263.7,60.6 253.1,54.6 242.6,60.6 242.6,72.8 '/%3E %3Cpolygon class='s' points='453.5,72.8 453.5,60.6 443,54.6 432.4,60.6 432.4,72.8 443,78.9 '/%3E %3Cpolygon class='s' points='537.9,60.6 537.9,72.8 548.4,78.9 559,72.8 559,60.6 548.4,54.6 '/%3E %3Cpolygon class='s' points='643.4,72.8 643.4,60.6 632.8,54.6 622.3,60.6 622.3,72.8 632.8,78.9 '/%3E %3Cpolygon class='s' points='485.2,54.6 485.2,54.6 485.2,42.5 474.6,36.4 464.1,42.5 464.1,54.7 474.6,60.8 474.6,60.8 474.6,72.7 474.6,72.7 464.1,78.8 464.1,91 474.6,97.1 485.2,91 485.2,78.9 485.2,78.9 495.7,72.8 495.7,60.6 '/%3E %3C/g%3E %3C/g%3E %3C/svg%3E "); background-size: auto 60px; background-repeat: repeat-x; background-position: center bottom; padding-top: 40px; padding-bottom: 100px; } .section-color { background-color: #337AB7; background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='utf-8'?%3E %3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 675 134' style='enable-background:new 0 0 675 134;' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .s%7Bfill:%23FFF;%7D %3C/style%3E %3Cg%3E %3Cg%3E %3Cpolygon class='s' points='63.3,54.7 63.3,42.5 52.8,36.4 42.2,42.5 42.2,54.7 52.8,60.8 '/%3E %3Cpolygon class='s' points='31.7,36.3 31.7,24.1 21.1,18 10.6,24.1 10.6,36.3 21.1,42.4 '/%3E %3Cpolygon class='s' points='84.4,18.3 84.4,6.1 73.9,0 63.3,6.1 63.3,18.3 73.9,24.4 '/%3E %3Cpolygon class='s' points='147.7,18.3 147.7,6.1 137.1,0 126.6,6.1 126.6,18.3 137.1,24.4 '/%3E %3Cpolygon class='s' points='232.1,18.3 232.1,6.1 221.5,0 211,6.1 211,18.3 221.5,24.4 '/%3E %3Cpolygon class='s' points='284.8,36.3 284.8,24.1 274.2,18 263.7,24.1 263.7,36.3 274.2,42.4 '/%3E %3Cpolygon class='s' points='379.7,18.3 379.7,6.1 369.2,0 358.6,6.1 358.6,18.3 369.2,24.4 '/%3E %3Cpolygon class='s' points='506.3,18.3 506.3,6.1 495.7,0 485.2,6.1 485.2,18.3 495.7,24.4 '/%3E %3Cpolygon class='s' points='675,18.3 675,6.1 664.5,0 653.9,6.1 653.9,18.3 664.5,24.4 '/%3E %3Cpolygon class='s' points='643.4,36.3 643.4,24.1 632.8,18 622.3,24.1 622.3,36.3 632.8,42.4 '/%3E %3Cpolygon class='s' points='559,36.3 559,24.1 548.4,18 537.9,24.1 537.9,36.3 548.4,42.4 '/%3E %3Cpolygon class='s' points='147.7,54.7 158.2,60.8 168.8,54.7 168.8,42.5 158.2,36.4 147.7,42.5 '/%3E %3Cpolygon class='s' points='232.1,54.7 232.1,42.5 221.5,36.4 211,42.5 211,54.7 221.5,60.8 '/%3E %3Cpolygon class='s' points='316.4,54.7 316.4,42.5 305.9,36.4 295.3,42.5 295.3,54.6 284.8,60.6 284.8,72.8 295.3,78.9 305.9,72.8 305.9,60.8 '/%3E %3Cpolygon class='s' points='358.6,54.7 358.6,42.5 348.1,36.4 337.5,42.5 337.5,54.7 348.1,60.8 '/%3E %3Cpolygon class='s' points='411.3,36.4 400.8,42.5 400.8,54.7 411.3,60.8 421.9,54.7 421.9,42.5 421.9,42.4 432.4,36.3 432.4,24.1 421.9,18 411.3,24.1 411.3,36.3 '/%3E %3Cpolygon class='s' points='506.3,54.7 516.8,60.8 527.4,54.7 527.4,42.5 516.8,36.4 506.3,42.5 '/%3E %3Cpolygon class='s' points='675,54.7 675,42.5 664.5,36.4 653.9,42.5 653.9,54.7 664.5,60.8 '/%3E %3Cpath class='s' d='M664.5,133.7l-10.5-6.1v-12.2l10.5-6.1V97.2l10.5-6.1V78.8l-10.5-6.1L654,78.8V91l0,0l-10.5,6.1v12.2l0,0 l-10.5,6.1l0,0l-10.5-6.1l0,0V97.1L611.7,91V78.8l-10.5-6.1l0,0v-12l10.5-6.1V42.4l-10.5-6.1l-10.5,6.1v12.1l-10.5,6.1v12.2l0,0 l-10.5,6.1V91l10.5,6.1l10.5-6.1l10.5,6.1v12.2l0,0l-10.5,6.1v12.2l0,0l-10.5,6.1l0,0l-10.5-6.1v-12.2l-10.5-6.1V97.2l-10.5-6.1 l-10.5,6.1l0,0l-10.5-6.1l0,0V78.9l-10.5-6.1l-10.5,6.1v12.2l0,0l-10.5,6.1v12.2l0,0l-10.5,6.1l0,0l-10.5-6.1l-10.5,6.1v12.2l0,0 l-10.5,6.1l0,0l-10.5-6.1l0,0v-12.2l10.6-6.1V97.2L443,91.1l-10.5,6.1l0,0L422,91.1l0,0V78.9l-10.5-6.1L401,78.9v12.2l10.5,6.1 l0,0v12.2l0,0l-10.5,6.1v12.2l-10.5,6.1l0,0l-10.5-6.1l0,0v-12.2l0,0l10.5-6.1V97.2L380,91.1V78.9l0,0l10.5-6.1V60.6L380,54.5 l-10.5,6.1v12.2l0,0L359,78.9v12.2l10.5,6.1l0,0v12.2l0,0l-10.5,6.1l0,0l-10.5-6.1l0,0V97.2L338,91.1V78.9l-11-6.1l-10.5,6.1v12.2 l10.5,6.1l0,0v12.2l-10.5,6.1v12.2l-10.5,6.1l0,0l-10.5-6.1l0,0v-12.2l10.5-6.1V97.2l-10.5-6.1L285,97.2v12.2l0,0l-10.5,6.1l0,0 l-10.5-6.1l-10.5,6.1l0,0l-10.5-6.1l0,0V97.2l-10.5-6.1l0,0V78.9L222,72.8l-11,6.1v12.2l-10.5,6.1v12.2l10.5,6.1l0,0v12.2 l-10.5,6.1l0,0l-10.5-6.1v-12.2l-10.5-6.1l0,0V97.2L169,91.1V78.9l-10.5-6.1L148,78.9v12.2l10.5,6.1v12.2l0,0l-10.5,6.1v12.2l0,0 l-10.5,6.1l0,0l-10.5-6.1v-12l10.5-6.1V97.4L127,91.3l-11,6.1l0,0l-10.5-6.1V79.1L94.9,73l-10.5,6.1v12.2l10.5,6.1v12.2l10.5,6.1 v12l0,0l-10.5,6.1l0,0l-10.5-6.1v-12.2l-10.5-6.1l-10.5,6.1l0,0l-10.5-6.1v-12l10.5-6.1V79.1L52.8,73l-10.5,6.1v12.2l-10.5,6.1v12 l-10.5,6.1v12.2l0,0l-10.5,6.1l0,0L0,127.6v6.4h675v-6.4L664.5,133.7z M527.4,127.6l-10.5,6.1l-10.5-6.1v-12.2l10.5-6.1l10.5,6.1 V127.6z'/%3E %3Cpolygon class='s' points='10.6,60.6 10.6,72.8 21.1,78.9 31.7,72.8 31.7,60.6 21.1,54.6 '/%3E %3Cpolygon class='s' points='116,72.8 126.6,78.9 137.1,72.8 137.1,60.6 126.6,54.6 126.6,42.5 116,36.4 105.5,42.5 105.5,54.7 116,60.8 '/%3E %3Cpolygon class='s' points='200.4,72.8 200.4,60.6 189.9,54.6 179.3,60.6 179.3,72.8 189.9,78.9 '/%3E %3Cpolygon class='s' points='253.1,78.9 253.1,91.1 263.7,97.2 274.2,91.1 274.2,78.9 263.7,72.8 263.7,72.8 263.7,60.6 253.1,54.6 242.6,60.6 242.6,72.8 '/%3E %3Cpolygon class='s' points='453.5,72.8 453.5,60.6 443,54.6 432.4,60.6 432.4,72.8 443,78.9 '/%3E %3Cpolygon class='s' points='537.9,60.6 537.9,72.8 548.4,78.9 559,72.8 559,60.6 548.4,54.6 '/%3E %3Cpolygon class='s' points='643.4,72.8 643.4,60.6 632.8,54.6 622.3,60.6 622.3,72.8 632.8,78.9 '/%3E %3Cpolygon class='s' points='485.2,54.6 485.2,54.6 485.2,42.5 474.6,36.4 464.1,42.5 464.1,54.7 474.6,60.8 474.6,60.8 474.6,72.7 474.6,72.7 464.1,78.8 464.1,91 474.6,97.1 485.2,91 485.2,78.9 485.2,78.9 495.7,72.8 495.7,60.6 '/%3E %3C/g%3E %3C/g%3E %3C/svg%3E "); background-size: auto 60px; background-repeat: repeat-x; background-position: center bottom; padding-top: 40px; padding-bottom: 100px; color: #FFF; } .section-no { background-color: #FFF; padding-top: 40px; padding-bottom: 40px; } |
Разделитель ромбиком
Два разделителя в PNG формате с размерами 1920 х 75 px. Для удобства сконверти́рованы в base64 формат. Оригиналы можно скачать по ссылкам: верхний разделитель и нижний разделитель
Вместо цветного фона в темной секции можно использовать графический. Пример такого кода во вкладке CSS с фото
|
1 2 3 4 5 6 7 8 9 |
<section class="section section-white"> Светлая секция </section> <section class="section section-color"> Темная секция </section> <section class="section section-white"> Светлая секция </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white { padding: 40px 0; } .section-color { background-color: #337AB7; background-image: url('data:image/png;base64,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'), url('data:image/png;base64,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'); background-size: contain, contain; background-repeat: no-repeat, no-repeat; background-position: top center, bottom center; padding: 80px 0; color: #FFF; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white { padding: 40px 0; } .section-color { background-color: #337AB7; background-image: url("sep-top.png"), url("sep-bottom.png"), url("photo.jpg"); background-size: contain, contain, cover; background-repeat: no-repeat, no-repeat, no-repeat; background-position: top center, bottom center, center center; padding: 100px 0; color: #FFF; } |
Разделитель стрелой
Вариант похожий на предыдущий, но выполненный средствами SVG.
Изменяя высоту height="60" у SVG, можно менять угол наклона темной стрелы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<section class="section section-white-t"> Светлая секция </section> <div class="separator-color"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60" viewBox="0.4 0.2 200 44" preserveAspectRatio="none"> <g transform="translate(-9.2218046,-83.494585)"> <path style="fill:#BFE2FF;" d="M 9.484815,89.716055 H 209.81018 V 126.90507 L 110.46368,93.705147 9.579391,127.39334 Z" /> <path style="fill:#FFF;" d="M 9.3544335,83.626877 H 209.68181 V 120.29057 L 110.46368,93.705147 9.4490103,120.77195 Z" /> </g> </svg> </div> <section class="section section-color"> Темная секция </section> <div class="separator-white"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60" viewBox="0.4 0.2 200 44" preserveAspectRatio="none"> <g transform="translate(-9.2218046,-83.494585)"> <path style="fill:#BFE2FF;" d="M 9.484815,89.716055 H 209.81018 V 126.90507 L 110.46368,93.705147 9.579391,127.39334 Z" /> <path style="fill:#337AB7;" d="M 9.3544335,83.626877 H 209.68181 V 120.29057 L 110.46368,93.705147 9.4490103,120.77195 Z" /> </g> </svg> </div> <section class="section section-white-b"> Светлая секция </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white-t { padding-top: 30px; padding-bottom: 20px; } .section-white-b { padding-bottom: 30px; } .section-color { background-color: #337AB7; padding-bottom: 30px; color: #FFF; } .separator-white { background-color: #FFF; font: 0/0 a; } .separator-color { background-color: #337AB7; font: 0/0 a; } |
Разделитель волнами
В данном варианте SVG-спрайты/сепараторы находятся непосредственно в HTML коде.
Похожий вариант, но с анимацией можно посмотреть в теме: Анимированный разделитель для секций на CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<section class="section section-white"> Светлая секция </section> <div class="separator-white"> <svg id="white" preserveAspectRatio="xMidYMax meet" viewBox="0 0 1600 100" style="" data-height="100"> <path style="fill: #72befc;" d="M1040,56c0.5,0,1,0,1.6,0c-16.6-8.9-36.4-15.7-66.4-15.7c-56,0-76.8,23.7-106.9,41C881.1,89.3,895.6,96,920,96 C979.5,96,980,56,1040,56z"></path> <path style="fill: #72befc;" d="M1699.8,96l0,10H1946l-0.3-6.9c0,0,0,0-88,0s-88.6-58.8-176.5-58.8c-51.4,0-73,20.1-99.6,36.8 c14.5,9.6,29.6,18.9,58.4,18.9C1699.8,96,1699.8,96,1699.8,96z"></path> <path style="fill: #72befc;" d="M1400,96c19.5,0,32.7-4.3,43.7-10c-35.2-17.3-54.1-45.7-115.5-45.7c-32.3,0-52.8,7.9-70.2,17.8 c6.4-1.3,13.6-2.1,22-2.1C1340.1,56,1340.3,96,1400,96z"></path> <path style="fill: #72befc;" d="M320,56c6.6,0,12.4,0.5,17.7,1.3c-17-9.6-37.3-17-68.5-17c-60.4,0-79.5,27.8-114,45.2 c11.2,6,24.6,10.5,44.8,10.5C260,96,259.9,56,320,56z"></path> <path style="fill: #72befc;" d="M680,96c23.7,0,38.1-6.3,50.5-13.9C699.6,64.8,679,40.3,622.2,40.3c-30,0-49.8,6.8-66.3,15.8 c1.3,0,2.7-0.1,4.1-0.1C619.7,56,620.2,96,680,96z"></path> <path style="fill: #72befc;" d="M-40,95.6c28.3,0,43.3-8.7,57.4-18C-9.6,60.8-31,40.2-83.2,40.2c-14.3,0-26.3,1.6-36.8,4.2V106h60V96L-40,95.6 z"></path> <path style="fill: #BFE2FF;" d="M504,73.4c-2.6-0.8-5.7-1.4-9.6-1.4c-19.4,0-19.6,13-39,13c-19.4,0-19.5-13-39-13c-14,0-18,6.7-26.3,10.4 C402.4,89.9,416.7,96,440,96C472.5,96,487.5,84.2,504,73.4z"></path> <path style="fill: #BFE2FF;" d="M1205.4,85c-0.2,0-0.4,0-0.6,0c-19.5,0-19.5-13-39-13s-19.4,12.9-39,12.9c0,0-5.9,0-12.3,0.1 c11.4,6.3,24.9,11,45.5,11C1180.6,96,1194.1,91.2,1205.4,85z"></path> <path style="fill: #BFE2FF;" d="M1447.4,83.9c-2.4,0.7-5.2,1.1-8.6,1.1c-19.3,0-19.6-13-39-13s-19.6,13-39,13c-3,0-5.5-0.3-7.7-0.8 c11.6,6.6,25.4,11.8,46.9,11.8C1421.8,96,1435.7,90.7,1447.4,83.9z"></path> <path style="fill: #BFE2FF;" d="M985.8,72c-17.6,0.8-18.3,13-37,13c-19.4,0-19.5-13-39-13c-18.2,0-19.6,11.4-35.5,12.8 c11.4,6.3,25,11.2,45.7,11.2C953.7,96,968.5,83.2,985.8,72z"></path> <path style="fill: #BFE2FF;" d="M743.8,73.5c-10.3,3.4-13.6,11.5-29,11.5c-19.4,0-19.5-13-39-13s-19.5,13-39,13c-0.9,0-1.7,0-2.5-0.1 c11.4,6.3,25,11.1,45.7,11.1C712.4,96,727.3,84.2,743.8,73.5z"></path> <path style="fill: #BFE2FF;" d="M265.5,72.3c-1.5-0.2-3.2-0.3-5.1-0.3c-19.4,0-19.6,13-39,13c-19.4,0-19.6-13-39-13 c-15.9,0-18.9,8.7-30.1,11.9C164.1,90.6,178,96,200,96C233.7,96,248.4,83.4,265.5,72.3z"></path> <path style="fill: #BFE2FF;" d="M1692.3,96V85c0,0,0,0-19.5,0s-19.6-13-39-13s-19.6,13-39,13c-0.1,0-0.2,0-0.4,0c11.4,6.2,24.9,11,45.6,11 C1669.9,96,1684.8,96,1692.3,96z"></path> <path style="fill: #BFE2FF;" d="M25.5,72C6,72,6.1,84.9-13.5,84.9L-20,85v8.9C0.7,90.1,12.6,80.6,25.9,72C25.8,72,25.7,72,25.5,72z"></path> <path style="fill: #337AB7;" d="M-40,95.6C20.3,95.6,20.1,56,80,56s60,40,120,40s59.9-40,120-40s60.3,40,120,40s60.3-40,120-40 s60.2,40,120,40s60.1-40,120-40s60.5,40,120,40s60-40,120-40s60.4,40,120,40s59.9-40,120-40s60.3,40,120,40s60.2-40,120-40 s60.2,40,120,40s59.8,0,59.8,0l0.2,143H-60V96L-40,95.6z"></path> </svg> </div> <section class="section section-color"> Темная секция </section> <div class="separator-color"> <svg id="color" preserveAspectRatio="xMidYMax meet" viewBox="0 0 1600 100" style="" data-height="100"> <path style="fill: #BFE2FF;" d="M1040,56c0.5,0,1,0,1.6,0c-16.6-8.9-36.4-15.7-66.4-15.7c-56,0-76.8,23.7-106.9,41C881.1,89.3,895.6,96,920,96 C979.5,96,980,56,1040,56z"></path> <path style="fill: #BFE2FF;" d="M1699.8,96l0,10H1946l-0.3-6.9c0,0,0,0-88,0s-88.6-58.8-176.5-58.8c-51.4,0-73,20.1-99.6,36.8 c14.5,9.6,29.6,18.9,58.4,18.9C1699.8,96,1699.8,96,1699.8,96z"></path> <path style="fill: #BFE2FF;" d="M1400,96c19.5,0,32.7-4.3,43.7-10c-35.2-17.3-54.1-45.7-115.5-45.7c-32.3,0-52.8,7.9-70.2,17.8 c6.4-1.3,13.6-2.1,22-2.1C1340.1,56,1340.3,96,1400,96z"></path> <path style="fill: #BFE2FF;" d="M320,56c6.6,0,12.4,0.5,17.7,1.3c-17-9.6-37.3-17-68.5-17c-60.4,0-79.5,27.8-114,45.2 c11.2,6,24.6,10.5,44.8,10.5C260,96,259.9,56,320,56z"></path> <path style="fill: #BFE2FF;" d="M680,96c23.7,0,38.1-6.3,50.5-13.9C699.6,64.8,679,40.3,622.2,40.3c-30,0-49.8,6.8-66.3,15.8 c1.3,0,2.7-0.1,4.1-0.1C619.7,56,620.2,96,680,96z"></path> <path style="fill: #BFE2FF;" d="M-40,95.6c28.3,0,43.3-8.7,57.4-18C-9.6,60.8-31,40.2-83.2,40.2c-14.3,0-26.3,1.6-36.8,4.2V106h60V96L-40,95.6 z"></path> <path style="fill: #72befc;" d="M504,73.4c-2.6-0.8-5.7-1.4-9.6-1.4c-19.4,0-19.6,13-39,13c-19.4,0-19.5-13-39-13c-14,0-18,6.7-26.3,10.4 C402.4,89.9,416.7,96,440,96C472.5,96,487.5,84.2,504,73.4z"></path> <path style="fill: #72befc;" d="M1205.4,85c-0.2,0-0.4,0-0.6,0c-19.5,0-19.5-13-39-13s-19.4,12.9-39,12.9c0,0-5.9,0-12.3,0.1 c11.4,6.3,24.9,11,45.5,11C1180.6,96,1194.1,91.2,1205.4,85z"></path> <path style="fill: #72befc;" d="M1447.4,83.9c-2.4,0.7-5.2,1.1-8.6,1.1c-19.3,0-19.6-13-39-13s-19.6,13-39,13c-3,0-5.5-0.3-7.7-0.8 c11.6,6.6,25.4,11.8,46.9,11.8C1421.8,96,1435.7,90.7,1447.4,83.9z"></path> <path style="fill: #72befc;" d="M985.8,72c-17.6,0.8-18.3,13-37,13c-19.4,0-19.5-13-39-13c-18.2,0-19.6,11.4-35.5,12.8 c11.4,6.3,25,11.2,45.7,11.2C953.7,96,968.5,83.2,985.8,72z"></path> <path style="fill: #72befc;" d="M743.8,73.5c-10.3,3.4-13.6,11.5-29,11.5c-19.4,0-19.5-13-39-13s-19.5,13-39,13c-0.9,0-1.7,0-2.5-0.1 c11.4,6.3,25,11.1,45.7,11.1C712.4,96,727.3,84.2,743.8,73.5z"></path> <path style="fill: #72befc;" d="M265.5,72.3c-1.5-0.2-3.2-0.3-5.1-0.3c-19.4,0-19.6,13-39,13c-19.4,0-19.6-13-39-13 c-15.9,0-18.9,8.7-30.1,11.9C164.1,90.6,178,96,200,96C233.7,96,248.4,83.4,265.5,72.3z"></path> <path style="fill: #72befc;" d="M1692.3,96V85c0,0,0,0-19.5,0s-19.6-13-39-13s-19.6,13-39,13c-0.1,0-0.2,0-0.4,0c11.4,6.2,24.9,11,45.6,11 C1669.9,96,1684.8,96,1692.3,96z"></path> <path style="fill: #72befc;" d="M25.5,72C6,72,6.1,84.9-13.5,84.9L-20,85v8.9C0.7,90.1,12.6,80.6,25.9,72C25.8,72,25.7,72,25.5,72z"></path> <path style="fill: #FFF;" d="M-40,95.6C20.3,95.6,20.1,56,80,56s60,40,120,40s59.9-40,120-40s60.3,40,120,40s60.3-40,120-40 s60.2,40,120,40s60.1-40,120-40s60.5,40,120,40s60-40,120-40s60.4,40,120,40s59.9-40,120-40s60.3,40,120,40s60.2-40,120-40 s60.2,40,120,40s59.8,0,59.8,0l0.2,143H-60V96L-40,95.6z"></path> </svg> </div> <section class="section section-white"> Светлая секция </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white { padding: 30px 0; } .section-color { background-color: #337AB7; padding: 50px 0 30px 0; color: #FFF; } .separator-white { font: 0/0 a; } .separator-color { background-color: #337AB7; font: 0/0 a; } |
Разделитель волной
Еще один пример разделия секций волной.
Как и в предыдущем варианте, SVG-спрайты/сепараторы находятся в HTML коде.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<section class="section section-white"> Светлая секция </section> <div class="separator-white"> <svg preserveAspectRatio="xMidYMax meet" viewBox="0 0 1600 100"> <path class="" style="opacity: 1;fill: #337AB7;" d="M-40,71.627C20.307,71.627,20.058,32,80,32s60.003,40,120,40s59.948-40,120-40s60.313,40,120,40s60.258-40,120-40s60.202,40,120,40s60.147-40,120-40s60.513,40,120,40s60.036-40,120-40c59.964,0,60.402,40,120,40s59.925-40,120-40s60.291,40,120,40s60.235-40,120-40s60.18,40,120,40s59.82,0,59.82,0l0.18,26H-60V72L-40,71.627z"></path> <path class="" style="opacity: 1;fill: #BFE2FF;" d="M-40,83.627C20.307,83.627,20.058,44,80,44s60.003,40,120,40s59.948-40,120-40s60.313,40,120,40s60.258-40,120-40s60.202,40,120,40s60.147-40,120-40s60.513,40,120,40s60.036-40,120-40c59.964,0,60.402,40,120,40s59.925-40,120-40s60.291,40,120,40s60.235-40,120-40s60.18,40,120,40s59.82,0,59.82,0l0.18,14H-60V84L-40,83.627z"></path> <path class="" style="fill: #337AB7;" d="M-40,95.627C20.307,95.627,20.058,56,80,56s60.003,40,120,40s59.948-40,120-40s60.313,40,120,40s60.258-40,120-40s60.202,40,120,40s60.147-40,120-40s60.513,40,120,40s60.036-40,120-40c59.964,0,60.402,40,120,40s59.925-40,120-40s60.291,40,120,40s60.235-40,120-40s60.18,40,120,40s59.82,0,59.82,0l0.18,138H-60V96L-40,95.627z"></path></svg> </div> <section class="section section-color"> Темная секция </section> <div class="separator-color"> <svg preserveAspectRatio="xMidYMax meet" viewBox="0 0 1600 100"> <path class="" style="opacity: 1;fill: #BFE2FF;" d="M-40,71.627C20.307,71.627,20.058,32,80,32s60.003,40,120,40s59.948-40,120-40s60.313,40,120,40s60.258-40,120-40s60.202,40,120,40s60.147-40,120-40s60.513,40,120,40s60.036-40,120-40c59.964,0,60.402,40,120,40s59.925-40,120-40s60.291,40,120,40s60.235-40,120-40s60.18,40,120,40s59.82,0,59.82,0l0.18,26H-60V72L-40,71.627z"></path> <path class="" style="opacity: 1;fill: #337AB7;" d="M-40,83.627C20.307,83.627,20.058,44,80,44s60.003,40,120,40s59.948-40,120-40s60.313,40,120,40s60.258-40,120-40s60.202,40,120,40s60.147-40,120-40s60.513,40,120,40s60.036-40,120-40c59.964,0,60.402,40,120,40s59.925-40,120-40s60.291,40,120,40s60.235-40,120-40s60.18,40,120,40s59.82,0,59.82,0l0.18,14H-60V84L-40,83.627z"></path> <path class="" style="fill: #FFF;" d="M-40,95.627C20.307,95.627,20.058,56,80,56s60.003,40,120,40s59.948-40,120-40s60.313,40,120,40s60.258-40,120-40s60.202,40,120,40s60.147-40,120-40s60.513,40,120,40s60.036-40,120-40c59.964,0,60.402,40,120,40s59.925-40,120-40s60.291,40,120,40s60.235-40,120-40s60.18,40,120,40s59.82,0,59.82,0l0.18,138H-60V96L-40,95.627z"></path></svg> </div> <section class="section section-white"> Светлая секция </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white { padding: 30px 0; } .section-color { background-color: #337AB7; padding: 40px 0 30px 0; color: #FFF; } .separator-white { background-color: #FFF; font: 0/0 a; } .separator-color { background-color: #337AB7; font: 0/0 a; } |
Наклонный разделитель
Два простых наклонных разделителя на SVG
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<section class="section section-white"> Светлая секция </section> <div class="separator-white"> <svg id="" preserveAspectRatio="xMidYMax meet" viewBox="0 0 1600 200"> <polygon class="" style="fill: #337AB7" points="-4,0 1604,198 1604,204 -4,204"></polygon> <polygon class="" style="opacity: 1;fill: #BFE2FF;" points="1604,198 1604,186 -4,0 -4,0"></polygon> <polygon class="" style="opacity: 1;fill: #72befc;" points="1604,186 1604,174 -4,0 -4,0"></polygon></svg> </div> <section class="section section-color"> Темная секция </section> <div class="separator-color"> <svg id="" preserveAspectRatio="xMidYMax meet" viewBox="0 0 1600 200"> <polygon class="" style="fill: #FFF" points="-4,0 1604,198 1604,204 -4,204"></polygon> <polygon class="" style="opacity: 1;fill: #72befc;" points="1604,198 1604,186 -4,0 -4,0"></polygon> <polygon class="" style="opacity: 1;fill: #BFE2FF;" points="1604,186 1604,174 -4,0 -4,0"></polygon></svg> </div> <section class="section section-white"> Светлая секция </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white { padding: 20px 0; } .section-color { background-color: #337AB7; padding: 20px 0; color: #FFF; } .separator-white { font: 0/0 a; } .separator-color { background-color: #337AB7; font: 0/0 a; } |
Разделитель со стрелкой
Стрелку в данном примере и переходящий на нее фон можно использовать для логотипа или другого значка.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<section class="section section-white-t"> Светлая секция </section> <div class="separator-white"> <svg preserveAspectRatio="xMidYMax meet" viewBox="0 0 1600 200"> <polygon class="" style="fill: #337AB7" points="886,86 800,172 714,86 -4,86 -4,204 1604,204 1604,86 "></polygon> <polygon class="" style="opacity: 1;fill: #BFE2FF;" points="800,172 886,86 900,86 800,186 700,86 714,86 "></polygon> <polygon class="" style="opacity: 1;fill: #337AB7;" points="800,162 876,86 888,86 800,174 712,86 724,86 "></polygon></svg> </div> <section class="section section-color"> Темная секция </section> <div class="separator-color"> <svg preserveAspectRatio="xMidYMax meet" viewBox="0 0 1600 200"> <polygon class="" style="fill: #FFF;" points="886,86 800,172 714,86 -4,86 -4,204 1604,204 1604,86 "></polygon> <polygon class="" style="opacity: 1;fill: #337AB7;" points="800,172 886,86 900,86 800,186 700,86 714,86 "></polygon> <polygon class="" style="opacity: 1;fill: #BFE2FF;" points="800,162 876,86 888,86 800,174 712,86 724,86 "></polygon></svg> </div> <section class="section section-white-b"> Светлая секция </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white-t { padding-top: 30px; } .section-white-b { padding: 30px 0; } .section-color { background-color: #337AB7; padding-top: 30px; color: #FFF; } .separator-white { background-color: #FFF; font: 0/0 a; } .separator-color { background-color: #337AB7; font: 0/0 a; } |
Разделитель волнистой линией
Высоту и ширину разделителей можно настроить параметрами width и height в SVG
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<section class="section section-white-t"> Светлая секция </section> <div class="separator-color"> <svg width="100%" height="120" viewBox="0.1 0.1 180 40" preserveAspectRatio="none"> <g transform="translate(-18,-78)"> <path style="fill:#BFE2FF;" d="M 31.615583,86.351641 H 192.16499 v 26.901969 c 0,0 -32.03411,-14.237983 -59.62682,-12.72484 -22.34188,1.2252 -54.779359,9.72634 -54.779359,9.72634 0,0 -22.029534,3.62882 -34.471238,-1.88988 -12.441702,-5.51871 -11.67199,-22.013589 -11.67199,-22.013589 z" /> <path style="fill:#FFF;" d="M 18.441597,78.106256 H 198.58126 v 39.288614 c 0,0 -43.10672,-27.825245 -73.47599,-19.687823 -30.369264,8.137423 -46.832208,12.548653 -46.832208,12.548653 0,0 -32.775418,8.05972 -46.735258,0 C 17.577964,102.19598 18.441597,78.106256 18.441597,78.106256 Z" /> </g> </svg> </div> <section class="section section-color"> Темная секция </section> <div class="separator-white"> <svg width="100%" height="120" viewBox="0.1 0.1 180 40" preserveAspectRatio="none"> <g transform="translate(-18,-78)"> <path style="fill:#BFE2FF;" d="M 31.615583,86.351641 H 192.16499 v 26.901969 c 0,0 -32.03411,-14.237983 -59.62682,-12.72484 -22.34188,1.2252 -54.779359,9.72634 -54.779359,9.72634 0,0 -22.029534,3.62882 -34.471238,-1.88988 -12.441702,-5.51871 -11.67199,-22.013589 -11.67199,-22.013589 z" /> <path style="fill:#337AB7;" d="M 18.441597,78.106256 H 198.58126 v 39.288614 c 0,0 -43.10672,-27.825245 -73.47599,-19.687823 -30.369264,8.137423 -46.832208,12.548653 -46.832208,12.548653 0,0 -32.775418,8.05972 -46.735258,0 C 17.577964,102.19598 18.441597,78.106256 18.441597,78.106256 Z" /> </g> </svg> </div> <section class="section section-white-b"> Светлая секция </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white-t { padding-top: 30px; } .section-white-b { padding: 30px 0; } .section-color { background-color: #337AB7; padding-top: 30px; color: #FFF; } .separator-white { background-color: #FFF; font: 0/0 a; position: relative; z-index: -1; } .separator-color { background-color: #337AB7; font: 0/0 a; position: relative; z-index: -1; } |
Ломанный разделитель
Высоту и ширину разделителей можно настроить параметрами width и height в SVG
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<section class="section section-white-t"> Светлая секция </section> <div class="separator-color"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0.5 0.2 176 30" preserveAspectRatio="none"> <g transform="translate(-13.668562,-111.38266)"> <path style="fill:#FFF;" d="M 13.898015,111.51495 H 190.83044 v 26.19241 l -45.97036,-14.43255 -42.22858,7.48354 -45.970361,-14.96709 -31.003265,16.03617 z"/> </g> </svg> </div> <section class="section section-color"> Темная секция </section> <div class="separator-white"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0.5 0.2 176 30" preserveAspectRatio="none"> <g transform="translate(-13.668562,-111.38266)"> <path style="fill:#337AB7;" d="M 13.898015,111.51495 H 190.83044 v 26.19241 l -45.97036,-14.43255 -42.22858,7.48354 -45.970361,-14.96709 -31.003265,16.03617 z"/> </g> </svg> </div> <section class="section section-white-b"> Светлая секция </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white-t { padding-top: 30px; } .section-white-b { padding-bottom: 30px; } .section-color { background-color: #337AB7; padding: 20px 0; color: #FFF; } .separator-white { background-color: #FFF; font: 0/0 a; position: relative; z-index: -1; } .separator-color { background-color: #337AB7; font: 0/0 a; position: relative; z-index: -1; } |
Разделитель горизонтальной ломаной линией
Высоту и ширину разделителей можно настроить параметрами width и height в SVG
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<section class="section section-white"> Светлая секция </section> <div class="separator-color"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60" viewBox="0.2 0 178 30" preserveAspectRatio="none"> <g transform="translate(-14.514284,-115.36352)"> <path style="fill:#BFE2FF;" d="m 14.74107,115.49581 h 178.02679 v 30.61607 h -29.10417 v -12.47321 h -10.58333 v -8.31548 h -13.98512 v 13.98512 h -20.41072 v -13.98512 h -8.31547 v 7.18155 h -7.18155 v 10.9613 H 85.422617 v -10.9613 H 68.791666 V 121.54343 H 51.40476 v 15.875 H 29.860117 v -9.82739 h -8.693452 v -7.55952 h -6.520089 v -4.53571 z" /> <path style="fill:#FFF;" d="M 14.741071,112.54762 H 192.76786 v 30.61607 H 163.66369 V 130.69048 H 153.08036 V 122.375 h -13.98512 v 13.98512 H 118.68452 V 122.375 h -8.31547 v 7.18155 h -7.18155 v 10.9613 H 85.422617 v -10.9613 H 68.791666 V 118.59524 H 51.40476 v 15.875 H 29.860118 v -9.82739 h -8.693452 v -7.55952 h -6.520089 v -4.53571 z"/> </g> </svg> </div> <section class="section section-color"> Темная секция </section> <div class="separator-white"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60" viewBox="0.2 0 178 30" preserveAspectRatio="none"> <g transform="translate(-14.514284,-115.36352)"> <path style="fill:#BFE2FF;" d="m 14.74107,115.49581 h 178.02679 v 30.61607 h -29.10417 v -12.47321 h -10.58333 v -8.31548 h -13.98512 v 13.98512 h -20.41072 v -13.98512 h -8.31547 v 7.18155 h -7.18155 v 10.9613 H 85.422617 v -10.9613 H 68.791666 V 121.54343 H 51.40476 v 15.875 H 29.860117 v -9.82739 h -8.693452 v -7.55952 h -6.520089 v -4.53571 z" /> <path style="fill:#337AB7;" d="M 14.741071,112.54762 H 192.76786 v 30.61607 H 163.66369 V 130.69048 H 153.08036 V 122.375 h -13.98512 v 13.98512 H 118.68452 V 122.375 h -8.31547 v 7.18155 h -7.18155 v 10.9613 H 85.422617 v -10.9613 H 68.791666 V 118.59524 H 51.40476 v 15.875 H 29.860118 v -9.82739 h -8.693452 v -7.55952 h -6.520089 v -4.53571 z"/> </g> </svg> </div> <section class="section section-white"> Светлая секция </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white { padding: 30px; } .section-color { background-color: #337AB7; padding: 30px 0; color: #FFF; } .separator-white { background-color: #FFF; font: 0/0 a; } .separator-color { background-color: #337AB7; font: 0/0 a; } |
Полукруглый разделитель
Задать радиус окружности можно изменив параметры width и height у SVG спрайта
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<section class="section section-white-t"> Светлая секция </section> <div class="separator-color"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60" viewBox="0.1 0.3 200 19" preserveAspectRatio="none"> <g transform="translate(-0.21755166,-100.15454)"> <path style="fill:#FFF;" d="M 0.2688579,100.29477 H 200.98548 c 0,0 -99.37375,39.84098 -200.7166221,0 z" /> </g> </svg> </div> <section class="section section-color"> Темная секция </section> <div class="separator-white"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60" viewBox="0.1 0.3 200 19" preserveAspectRatio="none"> <g transform="translate(-0.21755166,-100.15454)"> <path style="fill:#337AB7;" d="M 0.2688579,100.29477 H 200.98548 c 0,0 -99.37375,39.84098 -200.7166221,0 z" /> </g> </svg> </div> <section class="section section-white-b"> Светлая секция </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white-t { padding-top: 30px; } .section-white-b { padding-top: 40px; padding-bottom: 30px; } .section-color { background-color: #337AB7; padding-top: 40px; color: #FFF; } .separator-white { background-color: #FFF; font: 0/0 a; } .separator-color { background-color: #337AB7; font: 0/0 a; } |
Зигзагообразный разделитель
Простой разделитель на SVG.
Очень похожий вариант можно посмотреть в теме: Зигзагообразный бордюр на CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<section class="section section-white"> Светлая секция </section> <div class="separator-white"> <svg preserveAspectRatio="xMidYMax meet" viewBox="0 0 1600 100"> <polygon class="" style="fill: #337AB7" points="-40,63.667 19.833,3.833 80,64 140,4 200,64 260,4 320,64 380,4 440,64 500,4 560,64 620,4 680,64 740,4 800,64 860,4 920,64 980,4 1040,64 1100,4 1160,64 1220,4 1280.333,64.333 1340.333,4.333 1400,64 1460,4 1520,64 1578,6 1636,64 1636,104 -40,104 "></polygon> </svg> </div> <section class="section section-color"> Темная секция </section> <div class="separator-color"> <svg preserveAspectRatio="xMidYMax meet" viewBox="0 0 1600 100"> <polygon class="" style="fill: #FFF" points="-40,63.667 19.833,3.833 80,64 140,4 200,64 260,4 320,64 380,4 440,64 500,4 560,64 620,4 680,64 740,4 800,64 860,4 920,64 980,4 1040,64 1100,4 1160,64 1220,4 1280.333,64.333 1340.333,4.333 1400,64 1460,4 1520,64 1578,6 1636,64 1636,104 -40,104 "></polygon> </svg> </div> <section class="section section-white"> Светлая секция </section> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.section { text-align: center; font-size: 22px; font-family: 'Roboto', sans-serif; color: #000; } .section-white { padding: 30px; } .section-color { background-color: #337AB7; padding-top: 30px; padding-bottom: 50px; color: #FFF; } .separator-white { background-color: #FFF; font: 0/0 a; } .separator-color { background-color: #337AB7; font: 0/0 a; } |
В основном в теме присутствуют решения, найденные на codepen.io
у пользователей XYZZY estudio web и Ema
Огромное спасибо! Очень классные элементы!