
Для создания овала используется небольшой код на JavaScript
Пример:
HTML:
1 2 3 4 5 6 7 8 9 |
<section id="section"> <div class="oval-row"> <div class="w50 bannerImage"></div> <div class="w50 bannerText"> <div class="oval"></div> <p>Текст в секции</p> </div> </div> </section> |
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 |
#section * { margin: 0; box-sizing: border-box; } .oval-row { display: flex; flex-wrap: wrap; } .w50 { flex: 0 0 50%; } #section { overflow: hidden; margin: 20px 0; } #section .oval-row { flex-direction: row-reverse; } #section .bannerImage { background: url("bg.jpg"); background-size: cover; background-position: center center; background-color: #337AB7; } #section .bannerText { background-color: #337AB7; position: relative; z-index: 1; padding: 120px 40px;; } #section .bannerText .oval { position: absolute; background-color: #337AB7; top: -50%; right: 0; box-shadow: 20px 8px 16px rgba(0,0,0,0.2); border-radius: 50%; z-index: -1; content: ''; } #section .bannerText h2 { font-size: 48px; line-height: 48px; color: #FFF; } #section .bannerText p { font-size: 26px; line-height: 30px; color: #FFF; } @media screen and (max-width: 767px) { #section .oval-row { display: block; } #section .bannerText { padding: 0 40px 60px 40px; } } |
JS:
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 |
function calculateDesktopOffset(length) { return '-' + (length / 2) * Math.tan(15 * Math.PI / 180) + 'px'; } function makeOvalOverlay() { var section = document.getElementById("section"); var bannerText = section.getElementsByClassName('bannerText')[0]; var bannerImage = section.getElementsByClassName('bannerImage')[0]; var oval = section.getElementsByClassName('oval')[0]; var $height = bannerText.clientHeight; var $width = bannerText.clientWidth; if (window.innerWidth < 768) { bannerImage.style.height = $width / 1.4 + 'px'; oval.style.width = $width * 3 + 'px'; oval.style.height = $width * 3 + 'px'; oval.style.right = '-' + $width * 0.76 + 'px'; oval.style.top = '-' + $width * 0.2 + 'px'; } else { bannerImage.style.height = 'auto'; oval.style.width = $height * 2 + 'px'; oval.style.height = $height * 2 + 'px'; oval.style.right = calculateDesktopOffset($height); oval.style.top = "-50%"; } } makeOvalOverlay(); window.addEventListener('resize', function(){ makeOvalOverlay(); }); |
За основу взято решение, найденное на codepen.io у пользователя Zach Handing
Смотрите также:
Появляющиеся от движения курсора мыльные пузыри
Капли воды для оформления фона блока или секции
Сборник разделителей для перехода между секциями разного цвета.
Добавить комментарий:
Ваш комментарий отправлен!
Спасибо большое!
Здравствуйте, Александр! Подскажите, пожалуйста, почему при добавлении второго такого же блока, второй блок не становится овальным, первый тем временем работает?
Нужно JS переписывать, он сделан под одну секцию по ее айди