Question

我目前正在努力进行布局，我问自己这是否可以使用纯CSS或者我必须使用图像。

我想要实现的是这样的：

notch in a box

因此<body>是黄色区域，而白色框是<header>，其中某个区域被切断。阴影和圆角是这里的棘手问题。

Answer 1

在标题内添加一个div并给出position：absolute。根据你的模拟风格潜水。（我无法得到底部曲线:(）

header {
    background: white;
    box-shadow: rgba(0, 0, 0, 0.4) 0 0 8px;
    height: 100px;
    position:relative
}
.curve{
    background: #fcf5e5;
     border-radius:14px;
    box-shadow: inset 1px 4px 8px -5px #333;
    -moz-box-shadow: inset 1px 4px 8px -5px #333;
    -webkit-box-shadow: inset 1px 4px 8px -5px #333;
    height:60px;
    width:250px;
    position:absolute;
    left:0; right:0;
    margin:0 auto;
    bottom:-9px
}

<强> DEMO

是否有可能在纯粹的CSS的阴影框中创建一个缺口？

1 个答案: