Как я могу создать вогнутую нижнюю границу в CSS?

css css3 css-shapes

5198 просмотра

5 ответа

96 Репутация автора

Контент должен иметь возможность прокручиваться за ним в вогнутой области и не быть скрытым. В частности, я пытаюсь создать это:

Пример вогнутой нижней границы

Автор: Adam Nelson Источник Размещён: 18.09.2014 01:40

Ответы (5)


4 плюса

11404 Репутация автора

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

Автор: Chris Spittles Размещён: 18.09.2014 01:45

0 плюса

5831 Репутация автора

Я проверил способ достижения этого с border-topпомощью псевдоэлемента (здесь: after): 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?

Автор: enguerranws Размещён: 18.09.2014 02:02

0 плюса

122 Репутация автора

Не уверен, что вам нужно, это то, что вам нужно?

Quick Demo

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;
}
Автор: Regardt Ogies Myburgh Размещён: 18.09.2014 02:06

1 плюс

903 Репутация автора

Вы должны взглянуть на использование 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/

ОБНОВЛЕНИЕ: следующая скрипка также показывает поведение прокрутки http://jsfiddle.net/m8fo5zbk/2/ - правильно ли я понял, что вы хотели?

Второй UPDATE: Теперь понятно , что содержание должно быть помещено внутрь в DIV, отражено в этой демонстрации: http://jsfiddle.net/m8fo5zbk/3/

Автор: Peter Sorowka Размещён: 18.09.2014 02:19

5 плюса

76407 Репутация автора

Решение

Для прозрачного фона вы можете использовать box-shadows:

DEMO

Пояснение:

Смысл этой техники в том, чтобы использовать псевдоэлемент с box-shadows и прозрачным фоном, чтобы видеть сквозь него. Псевдоэлемент расположен абсолютно и имеет гораздо большую ширину, чем контейнер, чтобы (с помощью радиуса границы) получить плавную кривую вставки в нижней части элемента div.

Для простоты: фон div - это тень блока псевдоэлемента.

Значения z-index позволяют отображать содержимое div по тени.

****** РЕДАКТИРОВАТЬ *************************

С содержимым, прокручивающимся за формой, вы можете увидеть эту демонстрацию


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>

Автор: web-tiki Размещён: 18.09.2014 02:26
Вопросы из категории :
32x32