Для создания овала используется небольшой код на 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
Падающие в блоке или на всей странице снежинки, квадратики, треугольники и другие элементы
Добавить комментарий: