如何在CSS中创建一个凹的底边框？ [英] How can I create a concave bottom border in CSS?

问题描述

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

Content needs to be able to scroll behind it in the concave area and not be obscured. Specifically, I'm trying to create this:

推荐答案

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

For a transparent background, you can use box-shadows :

DEMO

DEMO

说明：

此技术的要点是使用带有阴影的伪元素，透明backcground通过它。伪元素被放置在位，并且具有比容器大得多的宽度，以便（在边界半径的帮助下）给div的底部平滑的插入曲线。

The point of this technique is to use a pseudo element with box-shadows and a transparent backcground to see through it. The pseudo element is abolutely positioned and has a much larger width than the container in order to (with the help of border radius) give a smooth inset curve to the bottom of the div.

简单： div的背景是伪元素的框阴影。

z-index值允许div的内容在阴影之下。

The z-index values allow the content of the div to be dispayed over the shadow.

****** EDIT ************* **********

****** EDIT *************************

随着内容在形状之后，您可以看到 DEMO

With content scolling behind the shape, you can see this 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>

这篇关于如何在CSS中创建一个凹的底边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！