Вопрос:
Контент должен иметь возможность прокручиваться позади него во вогнутой области и не скрываться. В частности, я пытаюсь создать это:
Лучший ответ:
Для прозрачного фона вы можете использовать box-shadows:
Объяснение:
Целью этой методики является использование псевдоэлемента с тенями коробок и прозрачным обратным окном, чтобы увидеть его. Псевдоэлемент полностью расположен и имеет гораздо большую ширину, чем контейнер, чтобы (с помощью радиуса границы) дать гладкую кривую вставки в нижней части div.
Чтобы сделать его простым: Фон div – это тень окна псевдоэлемента.
Значения z-index позволяют отображать содержимое div в тени.
****** EDIT *************************
С контентом, скопившимся за фигурой, вы можете увидеть это DEMO
html,body{ height:100%; margin:0; padding:0; background: url(‘http://lorempixel.com/output/people-q-c-640-480-1.jpg’); background-size:cover; } div { background:none; height:50%; position:relative; overflow:hidden; z-index:1; } div:after { content:»; position:absolute; left:-600%; width:1300%; padding-bottom:1300%; top:80%; background:none; border-radius:50%; box-shadow: 0px 0px 0px 9999px teal; z-index:-1; }<div>content</div>Ответ №1
Я не знаю, как вы могли бы сделать это с помощью границы, но вы можете попробовать использовать ::before в CSS3 в сочетании с border-radius, как показано в этой демонстрации.
#header { position: fixed; z-index: 1; height: 80px; background: #f00; overflow: hidden; top: 0; left: 0; right: 0; z-index: 2; } #header::before { content: «»; position: absolute; background: #fff; bottom: -22px; height: 30px; left: -50px; right: -50px; border-radius: 50%; } #content { padding: 20px; position: absolute; z-index: 1; top: 80px; left: 0; width: 460px; }<div id=»header»>Header</div> <div id=»content»> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>Ответ №2
Вам следует взглянуть на использование методов обрезки/маскировки CSS для вашей цели.
В частности, вы можете указать границы, которые вы хотите достичь, с помощью некоторых определений SVG:
<svg> <defs> <mask id=»masking»> <!— white area means: visible —> <rect width=»300″ height=»300″ fill=»white»/> <!— black area means: hidden —> <ellipse rx=»150″ ry=»10″ cx=»150″ cy=»300″ fill=»black» /> </mask> </defs> </svg>
И ссылайтесь на эту маску в CSS, используя:
#your-div { mask: url(‘#masking’); }
Я создал небольшой пример, демонстрирующий это в следующей скрипке. Это еще нужно немного подстроить, чтобы быть более гибким, когда дело доходит до разных размеров, но оно должно осветить вас следующим образом: http://jsfiddle.net/m8fo5zbk/
UPDATE: после скрипки также отображается поведение прокрутки http://jsfiddle.net/m8fo5zbk/2/ – правильно ли я понял, что вы намеревались?
2nd UPDATE: теперь понятно, что содержимое должно быть размещено внутри div, отраженное в этой демонстрации: http://jsfiddle.net/m8fo5zbk/3/
Ответ №3
Я проверил способ достижения этого, используя border-top псевдоэлемента (здесь,: после): http://jsfiddle.net/z6eqvnxw/
.test { width: 300px; height: 300px; background: blue; position: relative; } .test:after { display: block; content: «»; position: absolute; width: 100%; height: 25px; border-top: blue 10px solid; bottom: -23px; left: 0; border-radius: 40%; }
Это не идеально, рендер невелик.
Использует ли Javascript/Canvas вариант? Или только CSS?
Ответ №4
Не уверен, что вам нужно, это то, что вам нужно?
HTML
<div class=»Fixed1″></div> <div class=»scroll1″> <p>DEMO CONTENT</p> </div>
CSS
.Fixed1 { color: #666; height: 200px; width: 100%; background-color: #06C; position: fixed; margin-top:40px; } .scroll1 { color: #333; height: 1000px; width: 720px; margin-right: auto; margin-left: auto; padding-left:50px; margin-top:110px; background-color: #CCC; }