Question

内容需要能够在凹陷区域中滚动后面而不会被遮挡。具体来说，我试图创建这个：

Concave bottom border div example

Answer 1

对于透明背景，您可以使用框阴影：

<强> DEMO

说明：

这种技术的关键是使用带有阴影和透明背景的伪元素来透视它。伪元素是绝对定位的，并且宽度比容器大得多，以便（借助于边界半径）为div的底部提供平滑的插入曲线。

简化： div的背景是伪元素的box-shadow。

z-index值允许div的内容通过阴影进行显示。

******编辑*************************

随着内容在形状背后肆虐，您可以看到 DEMO

＆＃13;

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;
}

＆＃13;

<div>content</div>

＆＃13;

Answer 2

我不知道您可以通过边框执行此操作，但您可以尝试在CSS3中使用::before并结合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>

Answer 3

您应该看看为您的目的使用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/ - 我是否理解你的意图？

第二次更新：现在了解内容应该放在div的里面，在此演示中反映出来：http://jsfiddle.net/m8fo5zbk/3/

Answer 4

我测试了一种使用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？

Answer 5

不确定您需要什么，这是您需要的吗？

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;
}

如何在CSS中创建凹底边框？

5 个答案: